jQuery MultiSelect Widget not working inside ASP.NET UpdatePanel

Question

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!

Answer 1

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
    });
});