locked
How to register css/script in update panel after partial postback for search dropdown list RRS feed

  • Question

  • User1152553138 posted

    Refering to this thread

    https://forums.asp.net/t/2098665.aspx?How+to+register+css+script+in+update+panel+after+partial+postback

    I need to register css/javascript in update panel. The above is working fine. But now i have bootstrap .. How to do so?

    <head>
    
    Script for dropdown list
    
     <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body >
    
        <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">   
          
          </asp:ScriptManager>
    My dropdown list inside update panel
    
      <asp:UpdatePanel ID="UpdatePanel2" runat="server">
       <ContentTemplate>
    
    <asp:DropDownList ID="DrpABC" runat="server" CssClass="bs-select form-control" >   </asp:DropDownList>
    
    </ContentTemplate>
       
    </asp:UpdatePanel>
    
    </body >


    <script>
        $(function () {
            initdropdown();
        })
    
        function initdropdown() {
            $('#DrpABC').bootstrap-select.min.css();
    } </script>

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <script>
                Sys.Application.add_load(initdropdown);
            </script>
            <asp:DropDownList ID="DrpABC" runat="server" CssClass="bs-select form-control" >   </asp:DropDownList>
    <asp:ListItem>Item1</asp:ListItem> <asp:ListItem>Item2</asp:ListItem> <asp:ListItem>Item3</asp:ListItem> </asp:DropDownList> </ContentTemplate> </asp:UpdatePanel>

    I tried the above its not working ...

    How to APPLY THE ABOVE CSS FOR DROPDOWN LIST
    Tuesday, January 2, 2018 1:27 PM

All replies

  • User-1838255255 posted

    Hi Ashraf007,

    According to your description and code, you say you want to register the CSS/Script in initdropdown function, i am not clear your mean of this function snippet, i guess this is a wrong description. 

     function initdropdown() {
            $('#DrpABC').bootstrap-select.min.css();
        }

    please tell us if you want to add the reference of the CSS file or add style to the dropdownlist? 

    Note: I have tested it in my side, initdropdown method could be trigger, this function is work. 

    Best Regards,

    Eric Du 

    Wednesday, January 3, 2018 7:49 AM
  • User1152553138 posted

    Eric Du

    Hi Ashraf007,

    According to your description and code, you say you want to register the CSS/Script in initdropdown function, i am not clear your mean of this function snippet, i guess this is a wrong description. 

    Ashraf007

    function initdropdown() {
            $('#DrpABC').bootstrap-select.min.css();
        }

    please tell us if you want to add the reference of the CSS file or add style to the dropdownlist? 

    Note: I have tested it in my side, initdropdown method could be trigger, this function is work. 

    Best Regards,

    Eric Du 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" MaintainScrollPositionOnPostback="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
            <title> </title>
    
            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            <meta content="width=device-width, initial-scale=1" name="viewport" />
          
    
        
            <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
            <link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
            <link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
                    
            <link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />              
            <link href="assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css" />
            <link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css" />       
            <link href="assets/layouts/layout3/css/layout.min.css" rel="stylesheet" type="text/css" />
            <link href="assets/layouts/layout3/css/themes/default.min.css" rel="stylesheet" type="text/css" id="style_color" />
            <link href="assets/layouts/layout3/css/custom.min.css" rel="stylesheet" type="text/css" />
            <link href="assets/global/plugins/icheck/skins/all.css" rel="stylesheet" type="text/css" />
    
            <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
            <link href="assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
    
           
    
    
    </head>
    
    <body class="page-container-bg-solid page-header-menu-fixed page-md">
    
         <form id="form1" runat="server">
    
         <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
    
         <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
         <link href="assets/global/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
         <script src="assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
         <script src="assets/pages/scripts/components-bootstrap-select.min.js" type="text/javascript"></script>
    
         <script type="text/javascript">
    
               $(function () {
                   initdropdown();
               })
    
               function initdropdown() {
                   $('#DrpABC').bootstrap - select.min.css();
                 
               }
    
        </script>
    
        <script type="text/javascript">
            System.Application.add_load(initdropdown);
        </script>
    
      
               <asp:DropDownList ID="DrpABC" runat="server" CssClass="bs-select form-control" AutoPostBack="true" data-live-search="true" data-size="15">  
               <asp:ListItem>Item1</asp:ListItem>
               <asp:ListItem>Item2</asp:ListItem>
               <asp:ListItem>Item3</asp:ListItem>           
               </asp:DropDownList>
    
           
    
            <div class="quick-nav-overlay"></div>
               
            <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
            <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
            <script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
            <script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
            <script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
            <script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
                       
            <script src="assets/global/scripts/app.min.js" type="text/javascript"></script>
           
            <script src="assets/layouts/layout3/scripts/layout.min.js" type="text/javascript"></script>
            <script src="assets/layouts/layout3/scripts/demo.min.js" type="text/javascript"></script>
            <script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
            <script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
           
            <script src="assets/global/plugins/icheck/icheck.min.js" type="text/javascript"></script>
    
            <script src="assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
            <script src="assets/pages/scripts/components-bootstrap-select.min.js" type="text/javascript"></script>
    
    
            </ContentTemplate>    
            </asp:UpdatePanel>
    
    
    
        </form>
    
    </body>
    
    
    </html>
    
    
    The above is my test code ... After postback the dropdown list search feature get disabled ...

    See this link for detail ...
    https://forums.asp.net/t/2098665.aspx?How+to+register+css+script+in+update+panel+after+partial+postback

    Wednesday, January 3, 2018 12:07 PM