Bug #6783
closedBootstrap code compatibility/rendering failure with SELECT MULTIPLE boxes
0%
Description
Source code:
$group = new Form_Group("ICMP6 types"); $group->add(new Form_Select( 'icmptype6', 'Select some ICMP6 types', $selectedtypes, $alltypes, true ))->addClass('icmp6showhide'); $group->addClass('icmp6showhide'); $section->add($group); <!-- more code, usual CDATA, etc --> <script> $('#icmptype6').change(function() { alert("change event triggered"); // do stuff here }); // NB - same result happens with .on('change', function {}) instead of .change(function {}) </script>
Ignoring trivial divs, the bootstrap code produces this as the output HTML:
<select class="form-control icmp6showhide" name="icmptype6[]" id="icmptype6[]" multiple="multiple"> <option value="any">any</option> <option value="echorep" selected>Echo reply</option> <option value="echoreq">Echo request</option> ... </select>
The expected result is that the event is triggered as usual and the event code runs, when options in the select box are selected/deselected, but it doesn't. When I looked at the source code which bootstrap had produced, the issue is clear but it is not fixable within my knowhow, and there are compatibility issues that need more skill to get right.
What's happening is that for a multiple select box called "xyz", the bootstrap code produces HTML with id="xyz[]", which doesn't match the usual jQuery trigger $("#xyz").change(function {}), and as the two element id's aren't the same, nothing triggers. If the output HTML is manually saved and the select box element edited to remove the "[]", leaving just id="xyz", it works, so the underlying cause is clear.
The problem bites hard because
(1) I can't change id="xyz[]" to id="xyz" on the element in the GUI code, because that part is auto-generated by the bootstrap code itself; but also
(2) I can't change the trigger script to refer to $("#xyz[]").on(...) either, because it's either invalid or for other reasons doesn't work.
So the effect is I can't set an event on a select box, if it's a multiple select box.