Listbox select event handling on source change

[re29Member]

I have a question that I’m guessing is just how I have implemented things.

To start I have jqWidgets 1.7 and jquery 1.7.1.

I have put a listbox on the page, loading its initial content from a json feed. The JSON feed is sourced from a MySQL database. I use an ajax process to prompt it.

I believe there is a blog post about this exact way of doing it.

I bound event handlers to select and unselect to a jqPanel for testing – I’ll use these later for popup windows, but havent gotten that far.

I then added a jqButton toggle and bound the click. On click it prompts a source change in the listbox via AJAX and a separate php query. The same exact methodology as used to initialize the listbox. The contents of the box will alter based on the toggle.

When the page initially loads and the listbox is populated nothing is selected by default.

When I change the listbox source based off the toggle the first item automatically gets selected and it fires off the selection bind for the listbox. While it is just going to a panel that isn’t a big deal, but with a pop up window it would be a little troublesome.

I tried unselecting the item right after the source change, but the bind fires first.

I’m stuck at this point – how do I reload the source, but not fire the selection bind. Code samples can be provided if needed.

Thanks in advance.

Roger

[Peter StoevKeymaster]

Hi Roger,

As a work-around, you can unbind the ListBox’s ‘select event before changing the ListBox’s source and then after changing the source, bind to the ‘select’ event again. and clear the selected item by using the ‘clearSelection’ method.

For example:

$("#jqxWidget").jqxListBox('clearSelection', true);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[re29Member]

Okay that makes sense, but I can’t seem to get unbind to work. I set up a simple test:


$('#jqxListBox').unbind('select');
refreshMemberList();
$('#jqxListBox').jqxListBox('clearSelection', true);
$('#jqxListBox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxListBox').jqxListBox('getItem', args.index);
if (item != null) {
showUserDetails(item.label);
$('#Events').jqxPanel('prepend', '

Selected: ' + item.label + '

');
$('#window').jqxWindow('show');;
}
});


When ran, the listbox repopulates, the first item is selected by default, but it never unselects.

refreshMemberList is an ajax function to repopulate the listbox from a php based sql query.

[Peter StoevKeymaster]

Hi Roger,

I guess that this is happening because the refreshMemberList as an ajax function is loading the data asynchronously i.e you are clearing the selection, but the data is still not loaded.

This code should be in your success function of the ajax call:

$('#jqxListBox').jqxListBox('clearSelection', true);
$('#jqxListBox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxListBox').jqxListBox('getItem', args.index);
if (item != null) {
showUserDetails(item.label);
$('#Events').jqxPanel('prepend', '
Selected: ' + item.label + '
');
$('#window').jqxWindow('show');;
}
});

The second solution is to set the ‘async’ property of the ajax call to false. This will ensure that the ‘clearSelection’ method is called after the data is reloaded.

In addition, in the next release, changing the ‘source’ property of the ListBox will not affect the selection.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts