So, I have been playing with Gridstack and was wondering if there was a guide on how to add content to a newly added widget.
I have tested the example that adds a widget on button click. [Knockout.js demo][1] [1]: http://troolee.github.io/gridstack.js/demo/knockout.html which works fine but what I would like to do is add multiple buttons each adding a new widget with separate content. The content is just a DIV ID to some other JS.
Thanks
Here are two Buttons to add two different div contents using gridstack.
<button class="btn btn-default" id="first_widget" value="FirstWidget" href="#">First Widget</button>
<button class="btn btn-default" id="second_widget" value="SecondWidget" href="#">Second Widget</button>
In script initialize this way:
$('#first_widget').click(function(){
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> First Widget Content <div/>");
var grids = $('.grid-stack').data('gridstack');
grids.add_widget(el, 1, 1, 4, 1, true);
});
$('#second_widget').click(function(){
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> Second Widget Content / Charts <div/>");
var grids = $('.grid-stack').data('gridstack');
grids.add_widget(el, 1, 1, 4, 1, true);
});
Assuming that grid is your gridstack variable:
grid.add_widget( jQuery( '<div class="grid-stack-item"><div class="grid-stack-item-content">' + node.content + '</div></div>' ), node.x, node.y, node.width, node.height );
Answer found here: how-to-build-grid-from-gridstack-with-saved-html
Related
I am trying to created a nested repeater or a nested list view using WinJS 4.0, but I am unable to figure out how to bind the data source of the inner listview/repeater.
Here is a sample of what I am trying to do (note that the control could be Repeater, which I would prefer):
HTML:
<div id="myList" data-win-control="WinJS.UI.ListView">
<span data-win-bind="innerText: title"></span>
<div data-win-control="WinJS.UI.ListView">
<span data-win-bind="innerText: name"></span>
</div>
</div>
JS:
var myList = element.querySelector('#myList).winControl;
var myData = [
{
title: "line 1",
items: [
{name: "item 1.1"},
{name: "item 1.2"}
]
},
{
title: "line 2",
items: [
{name: "item 2.1"},
{name: "item 2.2"}
]
}
];
myList.data = new WinJS.Binding.List(myData);
When I try this, nothing renders for the inner list. I have attempted trying to use this answer Nested Repeaters Using Table Tags and this one WinJS: Nested ListViews but I still seem to have the same problem and was hoping it was a little less complicated (like KnockOut).
I know it is mentioned that WinJS doesn't support nested ListViews, but that seems to be a few years ago and I am hoping that is still not the issue.
Update
I was able to get the nested repeater to work correctly, thanks to Kraig's answer. Here is what my code looks like:
HTML:
<div id="myTemplate" data-win-control="WinJS.Binding.Template">
<div
<span>Bucket:</span><span data-win-bind="innerText: name"></span>
<span>Amount:</span><input type="text" data-win-bind="value: amount" />
<button class="removeBucket">X</button>
<div id="bucketItems" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#myTemplate')}"
data-win-bind="winControl.data: lineItems">
</div>
</div>
</div>
<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater"
data-win-options="{data: Data.buckets,template: select('#myTemplate')}">
</div>
JS: (after the "use strict" statement)
WinJS.Namespace.define("Data", {
buckets: new WinJS.Binding.List([
{
name: "A",
amount: 5,
lineItems: new WinJS.Binding.List( [
{ name: 'test item1', amount: 50 },
{ name: 'test item2', amount: 25 }
]
)
}
])
})
*Note that this answers part of my question, however, I would really like to do this all after a repo call and set the repeater data source programmatically. I am going to keep working towards that and if I get it I will post that as the accepted answer.
The HTML Repeater control sample for Windows 8.1 has an example in scenario 6 with a nested Repeater, and in this case the Repeater is created through a Template control. That's a good place to start. (I discuss this sample in Chapter 7 of Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, starting on page 372, or 374 for the nested part.)
Should still work with WinJS 4, though I haven't tried it.
Ok, so I have to give much credit to Kraig because he got me on the correct path to getting this worked out and the referenced book Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition is amazing.
The original issue was a combination of not using templates correctly (using curly braces in the data-win-bind attribute), not structuring my HTML correctly and not setting the child lists as WinJS.Binding.List data source. Below is the final working code structure to created a nested repeater when binding the data from code only:
HTML:
This is the template for the child lists. It looks similar, but I plan on add more things so I wanted it separate instead of recursive as referenced in the book. Note that the inner div after the template control declaration was important for me.
<div id="bucketItemTemplate" data-win-control="WinJS.Binding.Template">
<div>
<span>Description:</span>
<span data-win-bind="innerText: description"></span>
<span>Amount:</span>
<input type="text" data-win-bind="value: amount" />
<button class="removeBucketItem">X</button>
</div>
</div>
This is the main repeater template for the lists. Note that the inner div after the template control declaration was important for me. Another key point was using the "winControl.data" property against the property name of the child lists.
<div id="bucketTemplate" data-win-control="WinJS.Binding.Template">
<div>
<span>Bucket:</span>
<span data-win-bind="innerText: bucket"></span>
<span>Amount:</span>
<input type="text" data-win-bind="value: amount" />
<button class="removeBucket">X</button>
<div id="bucketItems" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#bucketItemTemplate')}"
data-win-bind="winControl.data: lineItems">
</div>
</div>
</div>
This is the main control element for the nested repeater and it is pretty basic.
<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater"
data-win-options="{template: select('#bucketTemplate')}">
</div>
JavaScript:
The JavaScript came down to a few simple steps:
Getting the winControl
var bucketsControl = element.querySelector('#budgetBuckets').winControl;
Looping through the elements and making the child lists into Binding Lists - the data here is made up but could have easily came from the repo:
var bucketsData = selectedBudget.buckets;
for (var i = 0; i < bucketsData.length; i++) {
bucketsData[i].lineItems =
new WinJS.Binding.List([{ description: i, amount: i * 10 }]);
}
Then finally converting the entire data into a Binding list and setting it to the "data" property of the winControl.
bucketsControl.data = new WinJS.Binding.List(bucketsData);
*Note that this is the entire JavaScript file, for clarity.
(function () {
"use strict";
var nav = WinJS.Navigation;
WinJS.UI.Pages.define("/pages/budget/budget.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var bindableBuckets;
require(['repository'], function (repo) {
//we can setup our save button here
var appBar = document.getElementById('appBarBudget').winControl;
appBar.getCommandById('cmdSave').addEventListener('click', function () {
//do save work
}, false);
repo.getBudgets(nav.state.budgetSelectedIndex).done(function (selectedBudget) {
var budgetContainer = element.querySelector('#budgetContainer');
WinJS.Binding.processAll(budgetContainer, selectedBudget);
var bucketsControl = element.querySelector('#budgetBuckets').winControl;
var bucketsData = selectedBudget.buckets;
for (var i = 0; i < bucketsData.length; i++)
{
bucketsData[i].lineItems = new WinJS.Binding.List([{ description: i, amount: i * 10 }]);
}
bucketsControl.data = new WinJS.Binding.List(bucketsData);
});
});
WinJS.UI.processAll();
}
});
})();
I have a jquery autocomplete and it works just fine. Now i want to add a default text in the dropdown like
Input box if the user types.. ja
It should display below
Select below category [should be there all the time]
java
javascript
Any suggestion on how to do it..
// Ajax Auto suggestion box
var options, a;
jQuery(function()
{
a = $('#txtOccupation').autocomplete({
serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
minChars: 1,
delimiter: /(,|;)\s*/,
deferRequestBy: 0, //miliseconds
noCache: false,
width: 420,
onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); },
});
browser = jQuery.browser;
$('.autocomplete').css('padding-left','10px');
});
HTML
** <input type="text" class="placeholder-text" maxlength="100" value="Job title, Keyword or O*NET code" onfocus="if(this.value=='Job title, Keyword or O*NET code')this.value=''" onblur="if(this.value=='')this.value='Job title, Keyword or O*NET code'" id="txtOccupation" name="txtOccupations" autocomplete="off"></input>**
I am providing answer to:
But its adding at the end, i want it to be on top. in your comment.
Based on the below your fiddle jsfiddle.net/J5rVP/158, I forked new fiddle http://jsfiddle.net/a3Tun/ to add element at top.
I have changed ui.content.push to ui.content.unshift.
unshift is like push, but it insert value at top of array. For more info, refer http://www.w3schools.com/jsref/jsref_unshift.asp
Is there a way to use a different HTML markup to populate the caption text in a Nivo Slider? For search engines I don't want the content to be stuffed in the title attribute of the image tags.
Currently:
<img src="/image.jpg" title="Blah blah paragraph..." />
I would like something like this:
<img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div>
There's an easier way to do it.
NivoSlider supports HTML captions. See documentation here:
http://docs.dev7studios.com/jquery-plugins/nivo-slider
Set up your html caption in a div outside the #slider with display:none like this:
<div id="htmlcaption" class="nivo-html-caption" style="display:none">
<strong>This</strong> is an example of a <em>HTML</em> caption.
It even has a link.
</div>
Now, in your slide image set the title attribute to the id of the caption element:
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
When the slider runs, it finds the referenced caption and copies it to the active caption div and animates it for you. No need to change the javascript at all.
Open up your jquery.nivo.slider.js, on line 94 is the processCaption function. You can change this instead of looking at the 'title' attribute to anything you want.
For example
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.parent().find(".nivo-title").html() != '' && vars.currentImage.find(".nivo-title").html() != undefined){
var title = vars.currentImage.find(".nivo-title").html();
if(title.substr(0,1) == '#') title = $(title).html();
...
}
}
Thanks to Alexander for pointing me in the right direction! The following worked:
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
var nivoMyTitle = vars.currentImage.parent('.nivo-imageLink').find('.nivo-title'); //class of container with paragraph
if(nivoMyTitle.html() != '' && nivoMyTitle.html() != undefined){
var title = nivoMyTitle.html();
if(title.substr(0,1) == '#') title = $(title).html();
The HTML:
<img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div>
The CSS:
.nivo-title{display:none;} .nivo-caption p{font-size:12px;}
in this example its replace the div container with other element but its get the other element from the yui function how can i make same example but with replace two divs in the html
HTML
<div id="demo">
<p><em>Click me.</em></p>
</div>
Script
YUI({ filter: 'raw' }).use("node", function(Y) {
var node = Y.one('#demo p');
var onClick = function(e) {
// e.target === node || #demo p em
var tag = e.target.get('parentNode.tagName');
// e.currentTarget === node
e.currentTarget.one('em').setContent('I am a child of ' + tag + '.');
};
node.on('click', onClick);
});
You mean, You'd like to replace another div or select another div?
In this example, em is selected and then its content is changed by setContent( "your new content" )
You can just select the e.currentTarget (the node or #demo p div) and setHTML() and build your div inside like string for example <div>content<div>, this is just one out of millions of ways to accomplish this.
have a look to this: http://www.jsrosettastone.com/
I have a menu-button that I want to remove the drop-shadow from. I would like to not have to instantiate a menu object first (since it requires me to specify a div in the DOM to attach it to). I am able to instantiate a menu in the JS, but when I try to remove the drop shadow via: this.menuButton.getMenu().cfg.setProperty('shadow', false); the drop shadow still appears. I checked the cfg object in the JS debugger and shadow is set to false, but the shadow still appears.
Another option would be to remove the shadow div from the dom, but that doesn't seem like the right thing to do.
I did eventually create a div in my DOM to hold my menu. I was wary at first because my layout is not very robust (we outsourced to a graphic designer and have been trying to integrate his work with our code); this was why I didn't want to introduce a div into the DOM.
The key for me was to include the div in a place where it wouldn't affect the layout. Originally I had something that looked like this:
<input> type="button" id="srchType" />
<input type="text" id="first-name" value="First Name" />
<input type="submit" id="profiles-search-submit" value="Search" />
I inserted the div between two of the inputs; this screwed up my layout. The key was to insert the div before or after; this wouldn't screw up my layout. YMMV, depending on how sensitive your DOM is to changes; I hope this helps someone out if they're wondering what they should do.
After you do this (create your div) you can create a YUI Menu object like so:
var searchMenuItems =
[{ text: "First Name", value: 'firstName', onclick: {fn: onMenuItemClick}},
{ text: "Last Name", value: 'lastName', onclick: {fn: onMenuItemClick}}];
var srchTypeMenuConfig = { shadow: false,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: .25
}
};
this.srchTypeMenu = new YAHOO.widget.Menu(this.searchMenuEl,
srchTypeMenuConfig);