Programmatically change widget state without firing event?

[klangleyParticipant]

Another easy question, I hope. I apologize for the cluelessness but I am finding jqWidgets to work differently from what I am used to with e.g. jQuery UI.

Here’s the situation: I have a jqxDropDownList and bind a function to the select (or change) event. Now when the user selects a value, the event fires — so far, so good. However, if I change the selected index of the dropdown programmatically (e.g. with the selectIndex method), the event also fires — not so good! How can I change the state of the dropdown programmatically without firing the event?

For a concrete example, imagine you have two dropdowns with the same options A,B,C,D,.. and whenever you select, say, B in the first dropdown, you want the second dropdown to be set to the next option, C. The code below doesn’t work because if you select B in the first dropdown, it sets the second dropdown to C, which sets the first to D, which sets the second to E, and so on.

Surely there is a way to change the widget state without firing the select or change event, or alternatively a way to distinguish between an event caused by actual user input and an event caused by a programmatic change?

<div id='jqxDropDownList1'></div>
<div id='jqxDropDownList2'></div>
<SCRIPT>
var source = ["A","B","C","D","E","F","G"];

$("#jqxDropDownList1").jqxDropDownList({
      source: source,
      selectedIndex: 0,
      theme: 'energyblue'
  }).on('select',function(event){
      var s=event.args.index;
      alert('#1 - '+s);
      $("#jqxDropDownList2").jqxDropDownList('selectIndex',s+1);
  });

$("#jqxDropDownList2").jqxDropDownList({
      source: source,
      selectedIndex: 1,
      theme: 'energyblue'
  }).on('select',function(event){
      var s=event.args.index;
      alert('#2 - '+s);
      $("#jqxDropDownList1").jqxDropDownList('selectIndex',s+1);
  });
</SCRIPT>

[DimitarParticipant]

Hello klangley,

This is the intended behaviour. The select event fires in both cases.

Best Regards,
Dimitar

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

[klangleyParticipant]

Hi Dimitar,

Thanks for the reply! I understand that it is intended behavior, but surely there has to be a way to distinguish between (1) a user explicitly selecting a value in the dropdown and (2) the dropdown being set by code to another value. Either a way to “silently” change the value of the dropdown (as I can do with, for example, regular HTML input elements or various other jQuery widget sets), or else a way to determine, when an event is fired, whether or not it was user input that triggered it.

This would be a total dealbreaker for me — I simply cannot use jqWidgets if there is no way to distinguish between user input and programmatic change.

But I’m confident that can’t be the case, otherwise there’d be no way to accomplish something perfectly reasonable like my example (in which two dropdowns mutually affect each other’s state), short of something absurdly kludgy like a global variable.

Thanks,
KL

[tkworkmanParticipant]

I also have a grid that populates a form when clicked. I need to prevent the form fields from fireing events until I actually change the values. Any ideas on how to accomplish this?

Thanks.
-T

[DimitarParticipant]

Hello T,

Form fields (e.g. inputs) will fire their change event whenever their values are changed. A possible solution is to have a flag set to true when the fields are populated by the grid and false when their values are manually changed. You would check for the flag in the change event handler and execute your logic only if the flag is false.

Best Regards,
Dimitar

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

[tmcneillParticipant]

I have found the intended behavior of the dropdownlist widget to be inconsistent with the jQuery API.

From the :

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( “change” ) after setting the value.

Example:

<input type='text' name='input1' id='input1'>
<div name='input2' id='input2'></div>
<input type='text' name='input3', id='input3'>
<select name='input4' id='input4'>
    <option value='apple'>apple</option>
    <option value='banana'>banana</option>
    <option value='coconut'>coconut</option>
</select>

$('#input1').jqxInput();
$('#input2').jqxDropDownList({source: ['apple', 'banana', 'coconut']});

$('#input1').val('new value');
$('#input2').val('banana');
$('#input3').val('new value');
$('#input4').val('banana');

In the above example, the change event will be triggered by calling val() on input1 and input2. The change event will not be triggered when calling val() on input3 and input4. This breaks the jQuery API.

I can understand the change event being fired on something like this:
$('#input1').jqxInput('val', 'new_value');
It’s part of the jQWidgets library, so it can behave however it likes. But changing the behavior of the jQuery val() function is quite poor form. Especially since this particular change seems to not be documented anywhere except this thread.

[Peter StoevKeymaster]

Hi tmcneill,

. We fire events when the item is changed and we think that is the correct approach. We do not think that changing the value should not trigger an event. We also put Event Arguments and many other things you will not find in the simple standard controls. If you wish, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdropdownlist/jquery-dropdownlist-api.htm?search=dropdown and you will see that there is “type” event argument – var type = args.type; // keyboard, mouse or null depending on how the item was selected. By using this member, you can check what kind of logic triggered the event.Our widgets implement the “val” method and if you look the API you will see it there. You will also see that:

$("#jqxDropDownList").jqxDropDownList('val', 'New Value');
// Set value using jQuery's val().
$("#jqxDropDownList").val('New Value');

This means that val and (‘val’ … are the same.

same for the INPUT tag;

$('#jqxInput').jqxInput('val', 'New Value'); or $('#jqxInput').val('New Value');

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts