Project

General

Profile

Actions

Bug #6783

closed

Bootstrap code compatibility/rendering failure with SELECT MULTIPLE boxes

Added by Stilez y over 8 years ago. Updated over 8 years ago.

Status:
Not a Bug
Priority:
Normal
Assignee:
Category:
Web Interface
Target version:
-
Start date:
09/11/2016
Due date:
% Done:

0%

Estimated time:
Plus Target Version:
Release Notes:
Affected Version:
Affected Architecture:

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.

Actions #1

Updated by Anonymous over 8 years ago

  • Assignee set to Anonymous
Actions #2

Updated by Stilez y over 8 years ago

For anyone needing a workaround, or if it's useful, I just googled "jquery square brackets" and found two syntaxes that can help:

  • Escaping the brackets: $('#icmptype6\\[\\]')
  • Using explicit attributes $('select[id="icmp6[]"]')

I'm not sure if these solve the problem (ie it's not really a "problem"), or just a workaround, and in either case if we can modify the class functions in pfSense so that for multiple selection the id one uses in script is the same as that which is used in the bootstrap form creation code.

Actions #3

Updated by Stilez y over 8 years ago

(also it's not clear to me if all browsers add "[]" and if there's a remaining compatibility issue in here)

Actions #4

Updated by Anonymous over 8 years ago

  • Category set to Web Interface
  • Status changed from New to Not a Bug
  • Assignee changed from Anonymous to Stilez y

The jQuery "begins with" syntax works with this type of control. Try:

$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);

<script>
    $('[id^=icmptype6]').change(function() {
        alert("change event triggered");
    });
</script>

I'm not aware of a browser that doesn't understand the array[] syntax for multiselects.

Obviously the start of the id needs to be unique.

Actions

Also available in: Atom PDF