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>
Try the ASP.NET AJAX pageLoad()
function, like this:
<script>
function pageLoad() {
jQuery(".chosen").data("placeholder", "Select Frameworks...").chosen();
}
</script>