Steve Borruso asked 5 years ago
Hello Abu,
I have a grid with several multi select2 dropdowns.
I need to dynamically add a select2 dropdown option using a value that I get from my db via a previous JS ajax call.
I’ve done many searches and looked at Select2 and Jquery doc but can’t seem to make it happen.
It’s like the select2 “change” trigger isn’t firing or maybe I’m just referencing the element incorrectly
Here’s the latest version of my attempt to add an option to the dropdown –
var mydata = { id: 66, text: ‘Barn owl’};
var newOption = new Option(mydata.text, mydata.id, false, false);
$(‘select[name*=snack]’).append(newOption).trigger(‘change.select2’);
I’ve tried many variations for a selector but the option never gets added.
Here’s what the element looks like in the browser –
<select role=”select” multiple=”” aria-multiselectable=”true” id=”176_snack” name=”snack” rowid=”176″ size=”3″ class=”editable select2-hidden-accessible” data-select2-id=”176_snack” tabindex=”-1″ aria-hidden=”true”><option role=”option” value=”85″ data-select2-id=”27″>damnit</option><option role=”option” value=”90″ data-select2-id=”28″>lalalal</option><option role=”option” value=”89″ data-select2-id=”29″>blahhhh2</option>
Maybe there’s a PHPGrid example somewhere that shows referencing a select2 element and adding an option ?
Any help is appreciated,
Thanks,
Steve
Steve Borruso answered 5 years ago
Beginning to think that the select2 element in a grid column is not accessible via JS unless the row is being edited since none of the many selectors I’ve tried have worked and the select element doesn’t appear to show up in the browser Elements trace unless the row is being edited. Pretty frustrated at this point.
Abu Ghufran Staff answered 5 years ago
Hello,
Yes, thats correct. select2 is rendered dynamically when you switch in edit mode (inline Or dialog).
For your change, you need to run JS after it has rendered. For dialog, You can use:
$opt[“add_options”][“afterShowForm”] = ‘function (form) { ….. }’;
$opt[“edit_options”][“afterShowForm”] = ‘function (form) { ….. }’;
And put your form customization code inside it. Demo usage is demos/editing/dialog-layout.php
Steve Borruso answered 5 years ago
Thanks Abu,
I finally implemented a different approach last night by using getColProp and setColProp
I have a custom UI text input that adds the items the user wants in the select2 to the backend db via ajax (and now also returns the key). The user uses this input to populate select2 choices, at any time, when not editing anything in the grid.
As part of that ajax call return, I now query the existing select2 editoptions, tack on the new items/keys, and save ..
var current_select2_options = jQuery(‘#meals_menu’).getColProp(the_meal).editoptions.value;
var new_select2_options = current_select2_options + new_select2_items;
jQuery(‘#meals_menu’).setColProp(the_meal, {editoptions:{value:new_select2_options}});
This seems to now allow the user to seamlessly make dynamic additions to the select2 options, while not in edit mode and without me having to reload the iframe that this grid is in.
Please let me know if you see any concerns with this approach.
Thanks for the info on afterShowForm, I will keep that in mind.
Steve
