1

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?

Synetech
  • 9,643
  • 9
  • 64
  • 96
cr8zymike
  • 37
  • 4
  • Look at the def tools in your browser. In FF and Chrome, you can see which scripts are loaded. Also, why not just link the script in the mark-up? Is it conditionally loaded? – Yatrix Oct 24 '12 at 01:20

2 Answers2

1

Try to reinitialize the multi-select list as below

$.ajaxStop(function(){
    $("#MainContent_List").multiselect();
});
Tariqulazam
  • 4,535
  • 1
  • 34
  • 42
  • Good answer, although note: As of jQuery 1.8, the .ajaxStop() method should only be attached to document. $( document ).ajaxStop(function() { $( "#loading" ).hide(); }); – Stuart Dobson Feb 10 '14 at 10:29
0

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
}
Jupaol
  • 21,107
  • 8
  • 68
  • 100
  • Sorry, I'm having difficulty putting up code here properly. string multiSelectScript = "$(function () {Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);" + "function EndRequestHandler(sender, args) {" + "$(\"#MainContent_ClaimantType_ID_MultiSelectList\").multiselect({selectedList:4}); } });"; ScriptManager.RegisterStartupScript(Page, typeof(Page), "multiselect", multiSelectScript, true); And nothing happens. Is the problem here that I'm registering the page in the register startup script and not the exact control? Thanks. – cr8zymike Oct 24 '12 at 14:02
  • Actually your suggestion did work. I was running it in FireFox so I could see the javascript added to the page source using FireBug. And nothing was happening. I just tried it in IE and it does work there. So the next challenge is to get it working in FireFox.Thanks for your help. – cr8zymike Oct 24 '12 at 16:12