I'm using Chosen Jquery within my application for a dropdownlist. Unfortunately it doesn't work when the dropdownlist is in updatepanel.

I know there is some conflicts between the scripts. But Unable to trace it out. Any help is appreciated.

My Code is :

<script src="/js/jquery-1.11.2.js" type="text/javascript"></script> 
<link href="../css/chosen.css"  rel="stylesheet" />
<script src="../js/chosen.jquery.js" type="text/javascript"></script>

<asp:UpdatePanel ID="upMain" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" 
                          CssClass="form-control chosen" 
                          multiple runat="server">
            <asp:ListItem Text="Select Course" Value="0" 
                          CssClass="form-control" runat="server"/>
            <asp:ListItem Text="core java" Value="1" 
                          CssClass="form-control" runat="server" />                  
            <asp:ListItem Text="C" Value="2" 
                          CssClass="form-control" runat="server" /> 
            <asp:ListItem Text="C++" Value="3" 
                          CssClass="form-control" runat="server" />  
            <asp:ListItem Text="C#" Value="4" 
                          CssClass="form-control" runat="server" />
        </asp:DropDownList>
   </ContentTemplate>
</asp:UpdatePanel>

<script>
    jQuery(document).ready(function mchoose() { 
        jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
    });
</script>

I'm using Chosen Jquery within my application for a dropdownlist. Unfortunately it doesn't work when the dropdownlist is in updatepanel.

I know there is some conflicts between the scripts. But Unable to trace it out. Any help is appreciated.

My Code is :

<script src="/js/jquery-1.11.2.js" type="text/javascript"></script> 
<link href="../css/chosen.css"  rel="stylesheet" />
<script src="../js/chosen.jquery.js" type="text/javascript"></script>

<asp:UpdatePanel ID="upMain" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" 
                          CssClass="form-control chosen" 
                          multiple runat="server">
            <asp:ListItem Text="Select Course" Value="0" 
                          CssClass="form-control" runat="server"/>
            <asp:ListItem Text="core java" Value="1" 
                          CssClass="form-control" runat="server" />                  
            <asp:ListItem Text="C" Value="2" 
                          CssClass="form-control" runat="server" /> 
            <asp:ListItem Text="C++" Value="3" 
                          CssClass="form-control" runat="server" />  
            <asp:ListItem Text="C#" Value="4" 
                          CssClass="form-control" runat="server" />
        </asp:DropDownList>
   </ContentTemplate>
</asp:UpdatePanel>

<script>
    jQuery(document).ready(function mchoose() { 
        jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
    });
</script>

• javascript
• c#
• jquery
• asp
• jquery-chosen

• any errors in console ? – giannisf Commented May 2, 2015 at 14:39
• 1 Have you tried to put your Javascript Code into the pageLoad function? More information about the pageLoad function and UpdatePanel can be found here: encosia./document-ready-and-pageload-are-not-the-same – Peter Schneider Commented May 2, 2015 at 15:59
• Nope.. no errors on console. @giannisf. – user3220291 Commented May 4, 2015 at 3:44

2 Answers 2

Try the ASP.NET AJAX pageLoad() function, like this:

<script> 
    function pageLoad() { 
        jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen(); 
    } 
</script>

This reloads the required js on partial post back. Use outside document ready function like this

<script type="text/javascript">
  function pageLoad() {
    $("#DropDownListDrugTypeID").chosen({ disable_search_threshold: 5, search_contains: true });
  } 
</script>