jQuery UI MultiSelect Widget: after postback checkboxes and theme disappear

[momer79]

I have created a jQuery Multiselect plugin user control in asp.net and using it on multiple pages.

User control needs to be in updatePanel. After postback it looks different (shown in below postback image).

I found this online - jQuery Plugins not working after ASP.Net AJAX UpdatePanel Partial PostBack or when Asynchronous request is over

"All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working"

On Page posback, i noticed in page source that following tag is missing.

  <button style="width: 231px;" aria-haspopup="true" class="ui-multiselect ui-widget ui-state-default ui-corner-all" type="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span><span>1 selected</span></button>

UserControl

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ucMultiSelect.ascx.vb" Inherits="ucMultiSelect" %>

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/prettify.js"></script>
    <script type="text/javascript" src="Scripts/jquery.multiselect.js"></script>
    <div id="testUserControl">
        <asp:ListBox ID="ListBox1" SelectionMode="Multiple" runat="server">
            <asp:ListItem Text="A" Value="1"></asp:ListItem>
            <asp:ListItem Text="B" Value="2"></asp:ListItem>
        </asp:ListBox>
    </div>
    <script type="text/javascript">
                    $(function () {
                        $("#testUserControl select").multiselect({
                            noneSelectedText: '',
                    });

                    });

                </script>

asp.net page

<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updSearch" UpdateMode="Conditional" runat="server">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
    <div id="testUserControl">
        <uc1:selectionCtrl ID="selectionCtrl1" runat="server" selected-text="Language" />
    </div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate> 
</asp:UpdatePanel> 

</form>

[cd10anil]

Looks I am facing the same issue and struggline to fix it. My code after ajax call is

<div class="col-sm-3">
  <select title="Please select the customer to proceed further." class="form-control" 
    id="SelectedCustomer" multiple="multiple" name="SelectedCustomer" style="width: 85%;
    display: none;" aria-disabled="false">
    <option value="4500">ALL</option>
    <option value="4500">Test</option>
  </select>
  <button type="button" class="ui-multiselect ui-widget ui-state-default ui-corner-all" title="Please select the customer to proceed further." aria-haspopup="true" style="width: 276px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span>--Select Customer--</span></button>
  <span class="field-validation-valid" data-valmsg-for="SelectedCustomer" data-valmsg-replace="true"></span>
</div>

If you notice the option are moved into the respective Select but the multiselect is applying on a sibling button created. Looks multi-select is bifurcating the tag but failed in restoring it again.

[mlh758]

Closing due to age.