jQuery MultiSelect Widget not working inside ASP.NET UpdatePanel

asp.net, jquery, multi-select, updatepanel

Solution

I figured this out myself. For anyone else having an issue similar to this, its because the multiselect widget keeps appending itself to the body everytime there is a partial postback. To fix this, I removed the menu from the DOM, then reinitalized it:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {
    $('.ui-multiselect-menu').each(function() {
        $(this).remove();
    });
    $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({
        multiple: false,
        header: false,
        noneSelectedText: false,
        selectedList: 1,
        minWidth: 170
    });

    $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({
        multiple: false,
        header: false,
        noneSelectedText: false,
        selectedList: 1,
        minWidth: 170
    });
});

Problem

I am using jQuery Multiselect for a couple of dropdown lists in my web page. It works fine, however, one of my dropdown's is inside an UpdatePanel and it does a postback. The postback is necessary because the data in the second dropdown is populated based on what the user selects in the first dropdown. After doing a postback, the jQuery Multiselect does not seem to allow me to select anything from the dropdown anymore. If drops down, but I can't click on anything. This appears to be a known bug, but the solutions discussed in the link do not seem to fix my issue. Here is some code I'm using: ``` ... <div style="margin-left: 23px"> <asp:UpdatePanel runat="server" ID="pnlAdvertiserReportsAdvertiserByHostSitesHostCities"> <ContentTemplate> <div style="display: inline-table"><asp:DropDownList runat="server" ID="ddlAdvertiserReportsAdvertiserByHostSitesStates" AutoPostBack="True" OnSelectedIndexChanged="ddlAdvertiserReportsAdvertiserByHostSitesStates_SelectedIndexChanged"></asp:DropDownList></div> <div style="display: inline-table"><asp:DropDownList runat="server" ID="ddlAdvertiserReportsAdvertiserByHostSitesCities"></asp:DropDownList></div> </ContentTemplate> </asp:UpdatePanel> </div> ... ... <script type="text/javascript"> $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({ multiple: false, header: false, noneSelectedText: false, selectedList: 1, minWidth: 170 }); $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({ multiple: false, header: false, noneSelectedText: false, selectedList: 1, minWidth: 170 }); ... ... var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesStates.ClientID %>').multiselect({ multiple: false, header: false, noneSelectedText: false, selectedList: 1, minWidth: 170 }); $('#<%= ddlAdvertiserReportsAdvertiserByHostSitesCities.ClientID %>').multiselect({ multiple: false, header: false, noneSelectedText: false, selectedList: 1, minWidth: 170 }); }); </script> ``` I would appreciate it if anyone has any suggestions or a solution to this!

Original source