change event does not fire

[Thomas SchmidtParticipant]

Good evening

I have a problem that I do not understand:

If I create a combo box from a <div> tag like <div id=’mydiv’> using:
$(‘#mydiv’).jqxComboBox(…)
and if I then add a select event function using:
$(‘#mydiv’).on(‘change’, myfunc);

everything works find and the function is called on every item change in the combo box.

But if I create a combo box from a <select> tag like <select id=’myselect’> … options … </select> using:
$(‘#myselect’).jqxComboBox(…)
and if I then add a select event function using:
$(‘#myselect’).on(‘change’, myfunc);

the event function is never called.
What do I have to do to get the event function called here as well?

Regards
Thomas

[DimitarParticipant]

Hello Thomas,

We do not experience this issue with the latest version of jQWidgets (3.8.0). Please take a look at JS Editor example.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Thomas SchmidtParticipant]

Hi Dimitar

Thank you first for your quick answer. I installed the latest version 3.8.0 as you recommended. The problem is the same. In trying to find out what the problem is, I found the following very strange behaviour:

HTML Code is:

<select id=’abc’>
<option value=’United States’>United States</option>
<option value=’Germany’>Germany</option>
</select>

If I write the following JS-Code:

$( ‘#abc’ ).jqxComboBox({ width:200, height:22, selectedIndex:1 });
$( ‘#abc’ ).on(‘change’, rrr);

The code runs well. The combobox is created well and the function rrr is called on every item change.
But if I write instead:

var x = $( ‘#abc’ ); // Store the result of the selector to a variable x
x.jqxComboBox({ width:200, height:22, selectedIndex:1 });
x.on(‘change’, rrr);

The combobox is created well.
But the function rrr is NOT CALLED on item change.

I like it to store the result of selectors $(…) to variables if I need selector in the following code more than once because every call of the selector scans the DOM and that results a bad performance.

I do this with all my JQX objects and it works fine in any context except the combobox. It even runs with the combobox if I create it from a <div> and load the item list via ajax call. But it does not work with the combobox if I create it from a <SELECT> like in the example above.

I really do not understand that.
Something seems to be strange here.
Can you help me?

Regards
Thomas

[DimitarParticipant]

Hi Thomas,

This behaviour can be expected, because, when creating a combobox from a select element, the select element itself remains, but with a changed id. You can see that if you explore the DOM with your browser’s developer tools. The variable x keeps the reference to the initial element, not the newly created combobox div. You can try this, however:

$('#abc').jqxComboBox({ width: 200, height: 22, selectedIndex: 1 });
var x = $('#abc');
x.on('change', rrr);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Thomas SchmidtParticipant]

Thank you Dimitar

Your comment was very helpful.

Regards
Thomas

[Author]

Posts