After AJAX update, change event fails

[NikhilPampatwar]

I used the reference as given in issue 18.
#18
Came here from http://stackoverflow.com/questions/8822601/jquery-plugin-bsmselect-doesnt-update-its-values-when-it-is-called-again-and-it

I have setup a bsmSelect as below:

 $("#<%=chkLstPlannigProgrammes.ClientId%>").bsmSelect({
                //title: 'Select another Programme...',
                animate: true,
                highlight: true,
                debugMode: true,
                removeLabel: '<strong>X</strong>',
                containerClass: 'bsmContainer',                // Class for container that wraps this widget
                listClass: 'bsmList-custom',                   // Class for the list ($ol)
                listItemClass: 'bsmListItem-custom',           // Class for the <li> list items
                listItemLabelClass: 'bsmListItemLabel-custom', // Class for the label text that appears in list items
                removeClass: 'bsmListItemRemove-custom',       // Class given to the "remove" link
                //extractLabel: function($o) {return $o.html();}
                addItemTarget: 'original'
              });

Initial State

In an event on "Select" link, I get lots of data. I set the selected as below:
var $chkLstPlProgs = $("#<%=chkLstPlannigProgrammes.ClientId%>");
$chkLstPlProgs.val(res.Data.SelectedProgs); // SelectedProgs is array
$chkLstPlProgs.trigger('change');

It looks like this: (state 2)

Which is correct. Now I remove 1 item and add another.
It looks like this:

The issues are:

1. The Title is lost. (Select Programme)
2. "3G on 2G" is not selected in original list. (but is shows to be selected

It means the remove works fine (as it actually deselects the item in list, but selection doesn't add it)

A quick help would be very very appreciated. (As you might know I needed this yesterday:-))

Regards,
Nikhil

[vicb]

I'll take a look if you can come with a small repro example that demonstrates the issue. It should not depend on a server being available and should only contain the minimum amount of code to reproduce the issue.

[NikhilPampatwar]

Thanks for quick response, Vicb.
I'll try and create the minimum code and post it here.

The main culprit is this line:
$chkLstPlProgs.trigger('change');
If I don't do it, my selection is not shown, but the change event of bsmContainer (Select) works fine.
Even before I get my data via AJAX and set the selection, the change event works fine and the selection in bsmSelect is synced with my main select.
I also tried with $chkLstPlProgs.trigger('click'); ... but this doesn't do anything.

Regards,
Nikhil

[NikhilPampatwar]

Strange, tried with simple HTML page and setting the selected values using array and triggering the "change" event, all is still working fine.
My project is ASP.NET and it's a very big project, I'm not sure how that might affect the issue.
But, I'm helpless here. :-(

Is it possible that something else is affecting it? May be AJAX call and JSON object?

[NikhilPampatwar]

Another update, now when I tried the code from the simple HTML page on my ASPX page (actually user control ASCX dropped on ASPX page), it doesn't work as my other ASP.NET server control. I set the values manually. If I don't fire change event, even then now it doesn;t work. Basically, manually setting the selection on my SELECT control via jQuery is making it fragile. Any suggestions?
I have jTable on it, I've got many Collapsible Panels on it. (if this information helps)

[vicb]

There must be some difference between your simple example and the final HTML page. You should try to isolate this difference to understand what can go wrong.

[NikhilPampatwar]

Thanks for the reply Vic and very sorry for the very late reply.
My page has about 15+ user controls (making it have about 200+ fields) and about 30+ AJAX operations. Can't isolate it. Sorry.
But you can close this issue for now, if I get time in next couple of weeks, I'll try and re-open it or submit a new issue (with more details).