Programmatically set the value of a Select2 ajax - javascript

I have a Select2 auto-complete input (built via SonataAdmin), but cannot for the life of me figure out how to programmatically set it to a known key/value pair.
There's a JS Fiddle here that shows roughly what I have. What I want to know is what function I can attach to the button so that
the Select2 field shows the text "NEW VALUE" to the user, and
the Select2 field will submit a value of "1" when the form is sent to the server
I have tried all sorts of combinations of jQuery and Select2 data and val methods, called against various inputs on the page, but nothing seems to work... surely there's some way to do this?
-- Edit --
The accepted answer below is very useful, helps shed some light on the right way to initialise the selection and explains what initSelection is for.
Having said that, it seems that my biggest mistake here was the way I was trying to trigger the change.
I was using:
$(element).select2('data', newObject).trigger('change');
But this results in an empty add object inside select2's change event.
If, instead, you use:
$(element).select2('data', newObject, true);
then the code works as it should, with the newObject available in select2's change event and the values being set correctly.
I hope this extra information helps somebody else!

Note this was tested with version 4+
I was finally able to make progress after finding this discussion: https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4
The last comment notes a method that I was able to use successfully.
Example:
$("#selectelement").select2("trigger", "select", {
data: { id: "5" }
});
This seems to be enough information for it to match the ajax data, and set the value correctly. This helped immensely with Custom Data Adapters.
Note: For multi select, execute the above code for each item, like this :
// for each initially selected ids, execute the above code to add the id to the selection.
[{id: 5, text: 'op5'}, {id: 10, text: 'op10'}].forEach(option => {
$("#selectelement").select2("trigger", "select", {data: { id: option.id, text: option.text }});
})

Note: The Question and this Answer are for Select2 v3. Select2 v4 has a very different API than v3.
I think the problem is the initSelection function. Are you using that function to set the initial value? I know the Select2 documentation makes it sound like that is it's purpose, but it also says "Essentially this is an id->object mapping function," and that is not how you have implemented it.
For some reason the call to .trigger('change') causes the initSelection function to get called, which changes the selected value back to "ENABLED_FROM_JS".
Try getting rid of the initSelection function and instead set the initial value using:
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
jsfiddle
Note: The OP has supplied the formatResult and formatSelection options. As supplied, those callback functions expect the items to have a "label" property, rather than a "text" property. For most users, it should be:
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
More info on the initSelection function:
If you search through the Select2 documentation for "initSelection", you will see that it is used when the element has an initial value and when the element's .val() function is called. That is because those values consist of only an id and Select2 needs the entire data object (partly so it can display the correct label).
If the Select2 control was displaying a static list, the initSelection function would be easy to write (and it seems like Select2 could supply it for you). In that case, the initSelection function would just have to look up the id in the data list and return the corresponding data object. (I say "return" here, but it doesn't really return the data object; it passes it to a callback function.)
In your case, you probably don't need to supply the initSelection function since your element does not have an initial value (in the html) and you are not going to call its .val() method. Just keep using the .select2('data', ...) method to set values programmatically.
If you were to supply an initSelection function for an autocomplete (that uses ajax), it would probably need to make an ajax call to build the data object.

To set initial values you need to add the necessary options tag to the select element with jQuery, then define these options as selected with select2's val method and finally trigger select2's 'change' event.
1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);
The third boolean argument tells select2 to trigger the change event.
For more info, see https://github.com/select2/select2/issues/3057

Be carreful, there is a mistake in "validated" comment.
autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
The correct way is
autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
Use text instead of label

With Select2 version 4+, there is actually nothing special you need to do. Standard jQuery with a 'change' event trigger at the end will work.
var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || []; // If you want to merge with existing
$(items).each(function () {
if(!$select.find("option[value='" + this.id + "']").length) {
$select.append(new Option(this.text, this.id, true, true));
}
data.push(this.id);
});
$select.val(data).trigger('change'); // Standard event notifies select2
There is a basic example in the Select2 documentation:
https://select2.org/programmatic-control/add-select-clear-items

from their examples
https://select2.github.io/examples.html
Programmatic access:
var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });

All you have to do is set the value and then execute: $ ('#myselect').select2 (); or $ ('select').select2 ();.
And everything is updated very well.

If you remove the .trigger('change') from your fiddle it logs Object {id: 1, label: "NEW VALUE"} (need to click twice since the logging is before the value change). Is that what you're looking for?

When using select2 with multiple option, use this construction:
$(element).select2("data", $(element).select2("data").concat(newObject), true);
jqueryselect2multiplesetconcatenation

this is it:
$("#tag").select2('data', { id:8, title: "Hello!"});

FOR VERSION 3.5.3
$(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');
Based on John S' answer . Just the the above will work however only if while initializing the select2 the initSelection option is not initialized.
$(".select2").select2({
//some setup
})

For those still using version 3.5 or even higher ones. Please be sure how you reference select2.js to your page. If you are using async or defer load. This plug-in might behave differently.
Thought to mention.

In my situation I was able to render the preselected option into the HTML server side with PHP.
During my page load, I already knew the option value, so my <select name="team_search"></select> became the following;
<select name="team_search">
<?php echo !empty($preselected_team)
? '<option selected="selected" value="'. $preselected_team->ID .'">' . $preselected_team->team_name . '</option>'
: null ?>
</select>';
As you can see, when I have a $preselected_team available I render in an option with the selected attribute, value and label set. And, if I don't have a value then not option is rendered.
This approach may not always be possible (and in the case of the OP is not mentioned), but it does come with the added benefit of being ready on page load ahead of JavaScript execution.

Append a new option with id and text
let $newOption = $("<option selected='selected'></option>").val(1).text('New Text goes here');
$("#selector").append($newOption).trigger('change');

Related

How to multi select results using Select2.js with data returned from Ajax call?

I have a two dropdowns that use Select2.js.
The second dropdown will initiate an ajax call base on the value from the first dropdown.
Assuming that I have already the result that I needed from Ajax call, and I already know what will be the result and that is the value 1276 and 1277.
What I want is when I click either one of the results all the results will be selected.
As what I read in Neelu's answer this will supposed to do the trick:
//this code block is outside the ajax call of select2.js
$('.select-2').on('select2:select', function() {
$('.select-2').val([1276,1277]);
$('.select-2').trigger("change");
});
The result doesn't reflect in the Select2 element but when I check the value using .val(), I get the result 1276 and 1277.
What I noticed if I trigger a different event e.g. button click to get the value of the Select2. That's the time it will work, but when I trigger another Select2 ajax call it doesn't work again.
I found the solution:
This is because during ajax call if there are no selected options,
and there are no option tag generated yet, thus
Select2.js can't reflect the changes in the display even though
.trigger('change') was already set.
So the trick is, during ajax call, once you received the response create an option tag (which is in my case I already knew that the response will be two value and I also want to select both of them either which I selected) thus I create two option tag after ajax call:
//..Ajax code response....
var selectElement = $(this)[0].$element[0];
processResults: function (data) {
$.each(data, function( k, v ) {
selectElement.innerHTML += '<option value="'+v.id+'">'+v.text+'</option>';
});
}
Then outside your ajax code:
$('.select-2').on('select2:select', function() {
$('.select-2').val([1276,1277]).trigger("change");
});
If you want to remove both selections if you either unselect one of them, this is the trick:
$('.select-2').on('select2:unselect', function() {
$('.select-2').val('').trigger("change");
//then destroy the option tag pre-created during ajax call
$('.select-2').empty();
});

How to register onClick listener to dijit Button within GridX?

I'm trying to register my onClick listener to dijit Button placed as in-cell widget withing GridX. I've done the following, basing on example test_grid_cellWidget:
{ field: "save", name:"Save",
widgetsInCell: true,
navigable: true,
decorator: function(){
//Generate cell widget template string
return '<button data-dojo-type="dijit.form.Button" data-dojo-attach-point="btn">Save</button>'
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set("label", "Speichern")
this.btn.connect("onClick", function(){
alert('clicked')
})
}
},
setCellValue is executed successfully, and the label is changed. However, the onClick listener is not registered and is not called, when I click on button. When I use the syntax data-dojo-props="onClick:function" it works, but it requires declaring listener function as global, which is something I'd like to avoid.
Anyway, I have the Button object, and I'm executing the code found in dijit documents, so it should be working. But why nothing is registered in that context?
I've found the answer in GridX wiki: https://github.com/oria/gridx/wiki/How-to-show-widgets-in-gridx-cells%3F
You need to use the field cellWidget.btn._cnnt:
setCellValue: function(gridData, storeData, cellWidget){
this.btn.set("label", "Speichern")
if(cellWidget.btn._cnnt){
// Remove previously connected events to avoid memory leak.
cellWidget.btn._cnnt.remove();
}
cellWidget.btn._cnnt = dojo.connect(cellWidget.btn, 'onClick', lang.hitch(cellWidget.cell, function(){
rowSaveClick(this.row)
}));
},
I don't know what dojo version you use, but as you use data-dojo-type, I suppose it's 1.7+.
First, I would recommend to drop the dot notation of module names and start using the AMD mid syntax instead (i.e.: drop "dijit.form.Button" for "dijit/form/Button", as the dot notation will be dropped in dojo 2.0).
Then, the recommended way of connecting events to widgets is to :
either define the event as a function (like widget.onClick = function(evt){...})
or use the "on" method of the widget (like widget.on("click", function(evt){...}))
I prefer to use the second form, as it's more consistent with dojo/on. It consists of using the event name without the "on", and put everything in lowercase. For example, if your widget had an extension point named "onMouseRightClick", you could use it as widget.on("mouserightclick", ...)
Your example would then become :
{ field: "save", name:"Save",
widgetsInCell: true,
navigable: true,
decorator: function(){
//Generate cell widget template string
return '<button data-dojo-type="dijit/form/Button" data-dojo-attach-point="btn">Save</button>'
},
setCellValue: function(data){
//"this" is the cell widget
this.btn.set("label", "Speichern")
this.btn.on("click", function(){
alert('clicked')
});
}
},
Note : untested code. I'm just guessing what the problem might be. Let me know if there is still an issue...
I've found that using getCellWidgetConnects works quite well (see docs).
But the docs aren't exactly clear, so it wasn't working for me at first. If you are connecting to a DomNode, the pass 'click' as the event in the connections array. If you are connecting to a Dijit widget, then pass 'onClick'.

FullCalendar - After initial load, dynamically updating ajax parameters not working

I'm working with http://arshaw.com/fullcalendar/ and I would like to dynamically filter the events shown based on various checkboxes on the page. I am using an ajax source (with filters passed as parameters) to gather data.
The problem I am running into is once I load the calendar, I cannot, for the life of me (or stackoverflow searches) figure out how to update the parameters. It seems once the calendar is loaded, those parameters are "baked" and cannot be changed.
I have tried every combination of addEventSource, removeEventSources, removeEvents, refetchEvents, etc (as recommended here: rerenderEvents / refetchEvents problem), with still no luck.
My current solution is to re-initiate the entire .fullCalendar every time a filter is updated-- this is leading to tons of issues as well and really isn't an elegant solution.
Any ideas on a simpler way to do this? Refetching your source with updated parameters each time should be automatic. I really do appreciate your help.
In my code i do like that :
I have an array with the calendars id to display and i update it when the user check or uncheck the checkbox.
In fullCalendar initialization I retrieve all events and i filter them with this function :
function fetchEvent( calendars, events) {
function eventCorrespond (element, index, array) {
return $.inArray(element.calendarid, calendars) > -1;
}
return events.filter(eventCorrespond);
}
$('#calendar').fullCalendar({
events: function(start, end, callback) {
//fetch events for date range on the server and retrieve an events array
//update calendars, your array of calendarsId
//return a filtered events array
callback(fetchEvent(calendars , events));
}
});
and when the user check or uncheck a checkbox i do :
$('#calendar').fullCalendar('refetchEvents');
The solution that works for me is:
$('#calendar').fullCalendar('removeEventSource', 'JsonResponse.ashx?technicans=' + technicians);
technicians = new_technicians_value;
$('#calendar').fullCalendar('addEventSource', 'JsonResponse.ashx?technicans=' + technicians);
After "addEventSource" events will be immediately fetched from the new source.
full answer here https://stackoverflow.com/a/36361544/5833265

How to remove all options from a Dijit FilteringSelect widget?

I tried removing all options from dijit.form.filteringselect and adding an option to dijit.form.filteringselect using the below function. However, I am getting an error: no method getOptions and addOption. am using dojo 1.7
function showTablesDropDown(tableDiv){
dijit.byId(tableDiv).removeOption(dijit.byId(tableDiv).getOptions());
dijit.byId(tableDiv).addOption(dojo.create("option", {label:"None", value:"None"}));
}
How to remove all options from dijit.form.filteringselect and add option to dijit.form.filteringselect?
The problem here is just a slight misunderstanding of how the FilteringSelect (and anything that inherits from _AutoCompleterMixin) interacts with its data. Regardless of how you are creating the FilteringSelect widget, the underlying mechanism for controlling its options is an object that adheres to the Dojo Store API.
This means that in order to modify your FilteringSelect widget's options, you need to interact with this store instead. I've set up this fiddle to demonstrate, but basically you want to change your function to something like:
function showTablesDropDown(tableDiv){
var filteringSelectWidget = dijit.byId(tableDiv);
// Clear current value since options are changing.
filteringSelectWidget.set("value", "");
var store = filteringSelectWidget.get("store");
var newData = [{label: "None", value: "None"}];
// Give the underlying store a new data array.
store.setData(newData);
}

Ext JS: Proper technique to filter a combobox?

When I filter a combobox by adding a filter to the underlying store, sometimes the filter works (items are removed) and sometimes it has no effect. I have debugged the filterBy function; it is being called and is returning true/false as I wish to filter/show items.
I read on the ExtJS forums that the, "Combobox uses filtering (even with triggerAction:'all'), so your own trigger gets replaced by the one from the combobox." Two filters?
What is the proper technique to remove temporarily items in an Ext JS combobox?
Use lastQuery: '' in the config.
I faced a similar issue where the combo box would show all the items when the trigger is clicked the first time, irrespective of the filter.
To make sure the filter in the store is not cleared the first time the ComboBox trigger is used, configure the combo with lastQuery=''
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-property-lastQuery
You want to understand how to reproduce the behaviour of triggerAction:'all', so why not diving into the code ?
Here the source code of the Class ComboBox :
http://docs.sencha.com/ext-js/4-0/source/ComboBox.html#Ext-form-field-ComboBox-cfg-triggerAction
If you look at the code, you'll see that:
1) When trigger is clicked, method doQuery is called.
onTriggerClick: function() {
var me = this;
if (!me.readOnly && !me.disabled) {
if (me.isExpanded) {
me.collapse();
} else {
me.onFocus({});
if (me.triggerAction === 'all') {
me.doQuery(me.allQuery, true);
} else {
me.doQuery(me.getRawValue(), false, true);
}
}
me.inputEl.focus();
}
},
2) In method doQuery, the interesting piece of code is:
if (isLocalMode) {
// forceAll means no filtering - show whole dataset.
if (forceAll) {
store.clearFilter();
} else {
// Clear filter, but supress event so that the BoundList is not immediately updated.
store.clearFilter(true);
store.filter(me.displayField, queryString);
}
}
3) We can see that the method filter of the Store is called.
You have your answer, the proper technique to remove temporarily items in an ExtJS combobox (in a store generally), is using the method filter on the store.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-filter
Remember, Your best friend is always documentation!
http://docs.sencha.com/ext-js/4-0/#
You'll need to delete the property 'lastQuery' of the Combobox,
everytime you filter the Store. This is where the ComboBox caches
it's Entryset after it build it up the first time.
So doing something like this:
'window combobox[name=countryselection]' : {
'change' : function(view, newValue){
with(Ext.data.StoreManager.lookup('Subcountries')){
var combobox = Ext.getCmp('MainWindow').query('combobox[name=subcountryselection]')[0];
//force the combobox the rebuild its entryset
delete combobox.lastQuery;
clearFilter();
filter('countryId', newValue);
}
}
}
It works great for me :-)
Keep in mind that filtering does not "recreate" the store with the new data, such that if you filtered a combo with the following values for "apple":
orange
banana
apple
And you clicked on the trigger, "apple" would be shown. However, if you started typing (and have typeAhead: true active, the filtering based on your input will default back to the orange/banana/apple Store.

Categories