JQuery partial postback for dynamic control doesn't work

Question

I am using Eric Hynds’ jQuery for a multi-select list. I have created the control dynamically in the code behind and can successfully bind to it.

The source would look something like:

<div class="multiselectlist">
  <select id="MainContent_List" multiple="multiple" name="ctl00$MainContent$List">
</div>

The dynamic controls are in an update panel. When I hit a button it does a partial postback and it loses the jQuery features associated with it.

I assumed that I would need to “re-register the script” so I did this:

ScriptManager.RegisterClientScriptInclude(this, GetType(), "multiselect", Page.ResolveClientUrl("../../Assets/Scripts/jquery.multiselect.min.js"));

Unfortunately nothing happens. I’m fairly sure that it is the javascript that isn’t run. Am I not registering the javascript correctly?

Answer 1

If my understanding is correct you just need to re-bind the JQuery Multiselect to the select control.

This is because the content of an UpdatePanel is re-rendered every time a partial post occurs, this means that the DOM elements are removed and re-created on every post

In order to accomplish your goal just re-bind the events as follows:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (a, e) {
     // place here the re-initialization of your multiselect plugin
});

Additionally, you could use the shortcut to the function:

function pageLoad() {
    // place here the re-initialization of your multiselect plugin
}

Answer 2

Try to reinitialize the multi-select list as below

$.ajaxStop(function(){
    $("#MainContent_List").multiselect();
});