I use a very simple dijit/form/select on my webppage
I add few options by code like this :
option1 = { value: "o1", label: "option 1", selected: false };
option2 = { value: "o2", label: "option 2", selected: true };
this.mySelect.addOption([option1, option2]);
It's working.
However when I try to clear my dijit/form/select using this code :
this.mySelect.removeOption(this.mySelect.getOption());
All my options are gone except the selected one.
I try using a .reset or even a .value = '' but nothing worked.
So how to remove all options from a dijit/form/select ?
Actually the answer is pretty simple, but not well docummented (it's pretty hard to find, like all dojo related stuff)
this.mySelect.removeOption(lang.clone(option1));
this.mySelect.removeOption(lang.clone(option2));
this.mySelect.store = null;
this.mySelect.set('value', '');
this.mySelect._setDisplay(""); //This line alone should do the trick
As in the comments, the last line should do the trick, but this way you can be sure that the select element gets cleared.
Demo: JSFiddle demo
Related
Understanding Setting JQuery Variables
Recently I was introduced to setting a JQuery variable as seen below via assistance I was looking for on another question I had on StackOverflow. You can create an input field via simply calling upon a variable and it also appears that the anchor variable defines styles too!
var clicked = $('.clicked');
var ul = clicked.children('ul');
var input = $('<input />', {
type: 'text',
class: 'rename',
value: 'New Folder',
focusout: function() {
$(this).siblings('a').html($(this).val()).show();
$(this).remove();
$(anchor).parent().removeClass('clicked');
}
});
var anchor = $('<a>', {
href: '#',
css: {
display: 'none'
}
});
ul.prepend($('<li>').append([input.select(), anchor]));
I believe I understand how to modify and recreate the above snippet, the only aspect I don't actually understand is the setting of the styles. Upon my research, I haven't yet found anything alike this method and I'm hoping I can find more of an understanding via posting a question.
My aim is to understand and use more frequently with my next target being to create a select option field with all the options calling for .selectBoxIt() at the end.
UPDATE
I'm not entirely sure if this is the best way to achieve this however I've come up with a solution thanks to answers to as how to create a select option list;
var select = $('<select />');
var options = [
{val : 1, text: '3 DAYS'},
{val : 2, text: '10 DAYS'},
{val : 3, text: '30 DAYS'},
{val : 4, text: '60 DAYS'}
];
$('.hello').prepend(select);
$(options).each(function() {
select.append($("<option>").attr('value',this.val).text(this.text));
});
// Because we are appending at a later date
// for the .selectBoxIt(); to work...
$(".hello select").selectBoxIt();
You can start here http://api.jquery.com/jquery/ and scroll down to the section on creating new elements.
As of jQuery 1.4, the second argument to jQuery() can accept a plain
object consisting of a superset of the properties that can be passed
to the .attr() method.
Is there a way to use HTML5's localstorage method with Jquery's select2 plugin? Right now when I enter data and close the browser/tab, all entered data is gone, which is not so optimal since it can get confusing if you dont remember what you've entered
My select2 code looks like this:
$(".select").select2({
minimumInputLength: 1,
multiple: true,
query: function(query){
$.getJSON( 'url path to remote API', {
name:query.term,
featured:true
}, function(results){
var data = {results: []};
$.each(results.data, function(index, item){
data.results.push({id: item.artist_id, text: item.name});
});
query.callback(data);
} );
}
});
Any help is very appreciated
give this a try: http://jsfiddle.net/7267rkxy/12/
I commented the code for you for some explanation of what's going on, you should be able to just swap out the data option with your query option and it should still work
PS: I noticed none of your answered questions have been marked 'accepted', if someone gives you an answer that you like or that works for you, you should mark their answer 'accepted' by clicking the checkbox next to the answer
HTML
<!-- setting a hard width for example -->
<input type="text" class="select" style="width:200px;" value="" />
JS
// set value property to local storage value
$(".select").val(localStorage.s2options);
$(".select").select2({
minimumInputLength: 1,
multiple: true,
data: [{id: 1, text: 'option1'},{id: 2, text: 'option2'},{id: 3, text: 'option3'}], //sample data
initSelection: function (element, callback) {
// initSelection only fires when there is something in the value property
callback($.parseJSON(element.val()));
}
}).on('change', function(info){
// checking if we have anything stored in local storage
var s2options = localStorage.s2options ? JSON.parse(localStorage.s2options) : [];
// add / remove options
if (info.added) {
s2options.push(info.added);
} else if (info.removed) {
s2options = s2options.filter(function(opt) {
return opt.id != info.removed.id;
});
}
// save selections to local storage
localStorage.s2options = JSON.stringify(s2options);
});
In addition to #bruchowski 's answer, the newer version of Select2 has a different way of doing this (initSelection and query are still supported for backwards compatibility though):
You have to create a custom DataAdapter and implement current() and query().
I have the following:
var panel = headerPanel.add({
id: 'recentcommands_button_id',
xtype: 'button',
text: "Recent Commands",
tooltip: "Sample Tooltip Text"
});
Followed later on by:
Ext.getCmp('recentcommands_button_id').tooltip = "TEST";
Which sets the tooltip value properly if I check the button's properties, but which does not actually change the value on the screen.
I tried using:
Ext.getCmp('recentcommands_button_id').tooltip.update("TEST");
This did not work either.
Any ideas?
You can use setTooltip method:
Ext.getCmp('recentcommands_button_id').setTooltip("TEST");
I use the following code to get a sap.ui.commons.TreeNode and to select it.
var newNode = this.tree.getNodes()[typeIdx].getNodes()[typeArray.length - 1];
newNode.select();
Unfortunately though, nothing happens. While newNode.getIsSelected() returns true, no handlers are executed (neither select on the tree nor selected on the node).
P.S. I made sure newNode.getSelectable() is true.
Did anyone use TreeNode's select() method sucessfully?
Code example
Here is an example
Adding an element does highlight the element but the alert is only shown when clicking with the mouse.
Here's an example of how this works.
Here's the function that we want to call on the node selection:
var sel = function(oEvent) {
console.log(oEvent.getSource().getText() + " selected");
};
And here's the tree with some nodes, nodes 1.1 and 1.2 have the handler:
new sap.ui.commons.Tree("tree", {
nodes: [
new sap.ui.commons.TreeNode({
text: "1",
nodes: [
new sap.ui.commons.TreeNode({
text: "1.1",
selected: sel
}),
new sap.ui.commons.TreeNode({
text: "1.2",
selected: sel
})
]
}),
new sap.ui.commons.TreeNode({
text: "2"
})
]
}).placeAt("content");
And when we do this (based on your example):
newNode = sap.ui.getCore().byId("tree").getNodes()[0].getNodes()[0]
newNode.select()
we get
1.1 selected
in the console, and the the node is highlighted.
Can you try using newNode.setIsSelected(true); That works for me
Best,
Robin
Having read the exact requirement (the event onSelect not being fired), I think there were two things missing:
the fireSelected event was not explicitly fired
the select event was set on the Tree element rather than the TreeNode template
I have updated your example to a new version: http://jsbin.com/hososexu/7/edit
When a user clicks on a selectbox, an Ajax even occurs.
This event places options in to the select box.
After the options are placed in to the select box the user should be able to click on them.
In Chrome, when you click the drop down list appears "Select One" but after the options are added, the list still is "Select One" the user can hit the down arrow key and select it, but it is not shown in the "drop down list of options" after they are added.
What magical piece of JS or jQuery would refresh this drop down list being displayed without a second click in chrome?
When the option is clicked this is being executed via JS:
secBox = document.getElementById('sel34541_75');
secBox.length = 1;
addOption(secBox, "Option 1", "execPopDrop('sel34541_75', 34541, 'Option 1', 'type1', 'page.php')");
addOption(secBox, "Option 2", "execPopDrop('sel34541_75', 34541, 'Option 2', 'type2', 'page.php')");
addOption(secBox, "Option 3", "execPopDrop('sel34541_75', 34541, 'Option 3', 'type3', 'page.php')");
addOption(secBox, "Option 4", "execPopDrop('sel34541_75', 34541, 'Option 4', 'type4', 'page.php')");
Add option function looks like this:
function addOption(selectbox, text, value) {
selectbox.options[selectbox.options.length]=new Option(text,value);
}
If i click and then hit the down arrow, I see the dynamic options are there, but not in the list visible. (again this works in IE and FF)
If I click it a second time I see the correct options in the drop down
Try this - works in all browsers - if you need support for IE4, then you need to add 1 to the options.length before adding the option ;)
update this solution is to the original question
function addOption(selectbox, text, value) {
selectbox.options[selectbox.options.length]=new Option(text,value);
}
However WHY add that horrible string to the option?
Looks like you would (shudder) EVAL the string in the value
Why not
addOption(secBox, "Option 1", "sel34541_75");
and then in execPopDrop pass the select, then it would be
function execPopDrop(sel) {
var val = sel[sel.selectedIndex].value;
var txt = sel[sel.selectedIndex].text;
var type="type"+val.split(" ")[1]; // from Option 1
var parm2 = val.replace(/[sel_]/g,""); // 34541
// here you have all the stuff you need to do whatever you did before
}