Select2 is not working in ASP.Net UserControl

Question

I am using the Select2 plugin examples . It is working on all pages however it is not working in a usercontrol. I have a usercontrol as below:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchPage.ascx.cs" Inherits="SIGORTAPRO.WEB.UC.SearchPage" %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../../../js/select2.js"></script>
<link href="../../../Content/css/select2.css" rel="stylesheet" />

<asp:Panel ID="panel" runat="server" Visible="false">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>

(function () {
    $("#<%= ddlSearchDropdownlist.ClientID %>").select2();
})();

Main Page as below

 <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <uc1:SearchPage runat="server" ID="SearchPage" />
            </ContentTemplate>
</asp:UpdatePanel>

If i load page there is no any error however Select2 is not working. The panel is hidden, however I make it visible if I load page. What am I missing?

Answer 1

Visible="false" means the resultant <div> and its contents are not rendered (ie the browser literally won't know anything about them because they will not be in the HTML that the browser receives).

If you want it to be hidden but still there for your code to deal with, then use style="display:none;" or appropriate class definition.

For example...

<asp:Panel ID="panel" runat="server" style="display:none;">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>

Or...

<style type="text/css">
  .myHiddenPanel {
    display: none;
  }
</style>
<asp:Panel ID="panel" runat="server" CssClass="myHiddenPanel">
    <asp:DropDownList ID="ddlSearchDropdownlist" runat="server"></asp:DropDownList>
</asp:Panel>