-
-
Couldn't load subscription status.
- Fork 3.5k
How to use .setValue() ?
#1965
-
Want to programmatically change the selected option.
First I initialize many selectize instances on document.(ready) via a jQuery selection of many select fields at once:
jQuery('.booleanWithDependancies select').selectize({ plugins : ["clear_button"] });
Note: I'm not storing the result in a variable. Perhaps I need to?
Note: All instances work as expected, so I'm unsure if initializing multiple instances in one jQuery selection is a problem, but maybe it is?
Later, I try to grab one instance like this:
var $selectizeInstance = jQuery( '#' + variable ).selectize;
... where variable is a identifier string, because the above is used within a loop to iterate through setting the value of more than one selectize instance, and this is the result:
function selectize(settings_user)
I found documentation for getting an instance of a selectized element and tried to follow it but not convinced I am following it properly because I'm not storing the many selectize_ instances created with the first code example above. Also unsure what $selectize[0] refers to. First of many possible instances?
Having seemingly got a selectize instance, this:
$selectizeInstance.setValue([ 43 ]);
results in:
Uncaught TypeError: jQuery(...).selectize.setValue is not a function
Tried to finding clues via the only .setValue() documentation I found but that only demonstrates calling .setValue() in an event handler assignment scenario:
<select id="select-tools" multiple placeholder="Pick a tool..."></select>
var $select = $('#select-tools').selectize({ maxItems: null, valueField: 'id', labelField: 'title', searchField: 'title', options: [ {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'}, {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'}, {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'} ], create: false });
var control = $select[0].selectize; $('#button-setvalue').on('click', function() { control.setValue([2, 3]); });
However the 'event' I am using is the response from an XHR request. So all I really need to do, or so I think/thought, is to get a selectize instance and set it's value.
Does anyone have some insight on how to do this, perhaps where I am going wrong?
Beta Was this translation helpful? Give feedback.
All reactions
UPDATE: I figured this one out.
It does seem that, as suspected, I needed to 'trap' (AKA assign) each instance I was creating with the jQuery selection returning many select elements as selectize instances. This involved the following:
jQuery('.booleanWithDependancies select').each( function ( idx , el ) { window[ '$selectize' + el.name ] = jQuery( el ).selectize({ plugins : ["clear_button"] }); })
Apparently window['$selectize' + el.name ] is the same as creating a dynamic, unique variable on the fly using eval(). Having memory burn of whispers that eval() is a performance hit, I went with window[] instead.
Later ...
jQuery.ajax({ ...
Replies: 1 comment
-
UPDATE: I figured this one out.
It does seem that, as suspected, I needed to 'trap' (AKA assign) each instance I was creating with the jQuery selection returning many select elements as selectize instances. This involved the following:
jQuery('.booleanWithDependancies select').each( function ( idx , el ) { window[ '$selectize' + el.name ] = jQuery( el ).selectize({ plugins : ["clear_button"] }); })
Apparently window['$selectize' + el.name ] is the same as creating a dynamic, unique variable on the fly using eval(). Having memory burn of whispers that eval() is a performance hit, I went with window[] instead.
Later ...
jQuery.ajax({ url : 'scriptReturningJSON', data : { item : ev.currentTarget.value } }).done( function ( rspnse ) { if ( typeof rspnse[0] !== 'undefined' ) { jQuery.each( rspnse , function ( idx , el ) { const selectIdSuffixString = rspnse[ idx ].variety; const optionValueInteger = rspnse[ idx ].id; var control = window[ '$selectize' + selectIdSuffixString ][0].selectize; control.setValue( optionValueInteger ) } }); } });
I hope this helps someone in the future.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1