locked
Adding JavaScript and CSS during an AJAX Partial Postback RRS feed

  • Question

  • User-1700095079 posted

    I am using a master ASP.NET page to load, unload web user control dynamically based on side menu selection.

    I called the java script and css files from master page. But when i load the web user control the script and css doesn't work.

    It seems that the script and css applied before i load/unload the web user control as after i loaded the control and refresh the page the script and css applied to the loaded web user control again

    So, is there any way to load the script and css files when load/unload web user control without refreshing the master page ?

    First time i load the user control when i click the side menu 

    And when i refresh the page the the css and js applied as in the following image: 

    Can any one help ?

    I use the following C# code to load and unload usercontrol

    protected void Page_Init(object sender, EventArgs e)
            {
                if (Session["ControlName"] != null)
                {
                    PControlHolder.Controls.Clear();
                    LoadProductsControl(Session["ControlName"].ToString());
                }
            }
    private void LoadProductsControl(string url)
            {
                PControlHolder.Controls.Clear();
    
                Control control = LoadControl(url);
                
                control.ID = url.Split(new char[] { '.' }, StringSplitOptions.RemoveEmptyEntries)[0];
    
                PControlHolder.Controls.Add(control);
            }
    
    protected void ASPxTreeView1_NodeClick(object source,DevExpress.Web.TreeViewNodeEventArgs e)
            {
                
    
                if (e.Node.Nodes.Count > 0)
                {
                    if (!e.Node.Expanded)
                        e.Node.Expanded = true;
                    else
                        e.Node.Expanded = false;
                }
    
                if (e.Node.Name != "")
                {
                    LoadProductsControl(e.Node.Name);
                    Session["ControlName"] = e.Node.Name;
                }
            }

    Thursday, October 18, 2018 11:06 AM

Answers

  • User-893317190 posted

    Hi Yusuf Shayah,

    Where do you write your js? If you put your js as follows. It will show the error.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                console.log(Sys); //you couldn't use Sys here.
                
            
               
            </script>
    
        </asp:ContentPlaceHolder>
    
    /head>
    <body>
        <form id="form1" runat="server">
            <div>
                 ...

    Please write your code in window.onload or behind the scriptManager.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                window.onload = function () {
                   console.log(Sys);
                        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
              //here write your code
          }  
      );  
    
                }
            
               
            </script>
    
        </asp:ContentPlaceHolder>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 22, 2018 7:15 AM

All replies

  • User475983607 posted
    My best guess is the JavaScript application is broken when the DOM is updated. JavaScript application are loaded when the page loads in the browser. If the code replaces elements and those elements had assigned event handlers then the handlers are gone too. Use the browser dev tool to debug the JavaScript app.
    Thursday, October 18, 2018 11:40 AM
  • User-1700095079 posted

    I debug the script in the browser div. It seems that the script loaded successfully but when the control loads based on the side menu event, the script and the theme don't applied to the newly loaded control.

    So how can I load the scripts and css when loading the user control ?

    Thursday, October 18, 2018 12:31 PM
  • User-1700095079 posted

    My best guess is the JavaScript application is broken when the DOM is updated. JavaScript application are loaded when the page loads in the browser. If the code replaces elements and those elements had assigned event handlers then the handlers are gone too. Use the browser dev tool to debug the JavaScript app.

    I debug the script in the browser div. It seems that the script loaded successfully but when the control loads based on the side menu event, the script and the theme don't applied to the newly loaded control.

    So how can I load the scripts and css when loading the user control ?

    Thursday, October 18, 2018 12:31 PM
  • User475983607 posted

    So how can I load the scripts and css when loading the user control ?

    Generally the entire JavaScript application and CSS references are created when a Single Page Application is first loaded.  It's difficult to provide meaningful advice when the source code is not posted or at least a sample that reproduces the issue.  At this point it seems that you need to learn how browsers work.

    Use JavaScript dynamically load CSS dynamically.

    https://stackoverflow.com/questions/2099517/how-to-load-in-an-external-css-file-dynamically

    You can do the same for JavaScript or...

    https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js

    ASP.NET Web Forms also has the script manager which can be used to load JavaScript.

    https://msdn.microsoft.com/en-us/library/bb398863.aspx?f=255&MSPPError=-2147217396

    Thursday, October 18, 2018 1:53 PM
  • User-893317190 posted

    Hi Yusuf Shayah,

    From your post's title during an AJAX Partial Postback, maybe your treeview and PControlHolder are in an updatepanel.

    If so, when the button event returns , it will not refresh the page which means that your  js will not run.

    If you want your js to run after the buttn event returns, you should register js code.

    Below is my code to simulate your problem. I try to  make the label's background-color red when the button is clicked. At first I comment out the code I highlighted.

     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Button"  OnClick="Button1_Click"/>
                        <asp:Panel ID="Panel1" runat="server">
    
                        </asp:Panel>
                    </ContentTemplate>
    
                </asp:UpdatePanel>
                
            
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
         
        </form>
         <script>
         
    
             Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
          //    $("#flag").css("background-color", "red");
          }  
      );  
                   $("#flag").css("background-color", "red");
                
                 
            </script>
    </body>

    And code behind.

     protected void Page_Init(object sender, EventArgs e)
            {
                if (Session["flag"] != null)
                {
                    Panel1.Controls.Clear();
                    Label label = new Label();
                    label.Text = Session["flag"].ToString();
                    label.ID = "flag";
                    Panel1.Controls.Add(label);
                }
              
            }
           
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label label = new Label();
                label.Text = "only in button click";
                label.ID = "flag";
                Panel1.Controls.Clear();
                Panel1.Controls.Add(label);
                Session["flag"] = "from button click";
    
    
            }

    And the result.First time I don't refresh, after refreshing it shows red.

    You could remove the "//" and use your own js , it should work.

    If it is not the case , please post your code to let us reproduce your problem.

    Best regards,

    Ackerly Xu

    Friday, October 19, 2018 9:07 AM
  • User-1700095079 posted

    Hi Yusuf Shayah,

    From your post's title during an AJAX Partial Postback, maybe your treeview and PControlHolder are in an updatepanel.

    If so, when the button event returns , it will not refresh the page which means that your  js will not run.

    If you want your js to run after the buttn event returns, you should register js code.

    Below is my code to simulate your problem. I try to  make the label's background-color red when the button is clicked. At first I comment out the code I highlighted.

     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Button"  OnClick="Button1_Click"/>
                        <asp:Panel ID="Panel1" runat="server">
    
                        </asp:Panel>
                    </ContentTemplate>
    
                </asp:UpdatePanel>
                
            
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
         
        </form>
         <script>
         
    
             Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
          //    $("#flag").css("background-color", "red");
          }  
      );  
                   $("#flag").css("background-color", "red");
                
                 
            </script>
    </body>

    And code behind.

     protected void Page_Init(object sender, EventArgs e)
            {
                if (Session["flag"] != null)
                {
                    Panel1.Controls.Clear();
                    Label label = new Label();
                    label.Text = Session["flag"].ToString();
                    label.ID = "flag";
                    Panel1.Controls.Add(label);
                }
              
            }
           
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label label = new Label();
                label.Text = "only in button click";
                label.ID = "flag";
                Panel1.Controls.Clear();
                Panel1.Controls.Add(label);
                Session["flag"] = "from button click";
    
    
            }

    And the result.First time I don't refresh, after refreshing it shows red.

    You could remove the "//" and use your own js , it should work.

    If it is not the case , please post your code to let us reproduce your problem.

    Best regards,

    Ackerly Xu

    Yes, it is exactly what i need but if i have a multiple links to script files in my page. How could i registered them a gain ? 

    Friday, October 19, 2018 7:43 PM
  • User-893317190 posted

    Hi Yusuf Shayah,

    If you have multiple js files, you only need to write related js code in  the function 

     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
          //   here write your related js code
          }  
      );  

    If you still meet problem, please post some sample code to let us know clearly about your  problem.

    Best regards,

    Ackerly Xu

    Monday, October 22, 2018 1:22 AM
  • User-1700095079 posted

    Hi Yusuf Shayah,

    If you have multiple js files, you only need to write related js code in  the function 

     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
          //   here write your related js code
          }  
      );  

    If you still meet problem, please post some sample code to let us know clearly about your  problem.

    Best regards,

    Ackerly Xu

    Thanks a lot for your help and support. Could you please give me an example on how to call script file from the script function ?

    Best Regards,

    Yusuf

    Monday, October 22, 2018 5:48 AM
  • User-1700095079 posted

    Hi Ackerly,

    Thanks for you help and support, i tried to write the code  but i get the following error: 

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
          //   here write your related js code
          }  
      );  

    Uncaught ReferenceError: Sys is not defined, I am using Visual Studio 2017 

    Monday, October 22, 2018 6:29 AM
  • User-893317190 posted

    Hi Yusuf Shayah,

    Where do you write your js? If you put your js as follows. It will show the error.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                console.log(Sys); //you couldn't use Sys here.
                
            
               
            </script>
    
        </asp:ContentPlaceHolder>
    
    /head>
    <body>
        <form id="form1" runat="server">
            <div>
                 ...

    Please write your code in window.onload or behind the scriptManager.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                window.onload = function () {
                   console.log(Sys);
                        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
              //here write your code
          }  
      );  
    
                }
            
               
            </script>
    
        </asp:ContentPlaceHolder>

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 22, 2018 7:15 AM
  • User-1700095079 posted

    Hi Yusuf Shayah,

    Where do you write your js? If you put your js as follows. It will show the error.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                console.log(Sys); //you couldn't use Sys here.
                
            
               
            </script>
    
        </asp:ContentPlaceHolder>
    
    /head>
    <body>
        <form id="form1" runat="server">
            <div>
                 ...

    Please write your code in window.onload or behind the scriptManager.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                window.onload = function () {
                   console.log(Sys);
                        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
              //here write your code
          }  
      );  
    
                }
            
               
            </script>
    
        </asp:ContentPlaceHolder>

    Best regards,

    Ackerly Xu

    Thanks a lot for your help and support. much appreciated laughing

    Monday, October 22, 2018 12:07 PM
  • User-1700095079 posted

    Hi Yusuf Shayah,

    Where do you write your js? If you put your js as follows. It will show the error.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                console.log(Sys); //you couldn't use Sys here.
                
            
               
            </script>
    
        </asp:ContentPlaceHolder>
    
    /head>
    <body>
        <form id="form1" runat="server">
            <div>
                 ...

    Please write your code in window.onload or behind the scriptManager.

     <asp:ContentPlaceHolder ID="head" runat="server">
            <style>
    
                .selected{
                    background-color:cornflowerblue
                }
          
            </style>
            <script src="../Scripts/jquery-3.3.1.js"></script>
    
            <script>
    
                window.onload = function () {
                   console.log(Sys);
                        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
              //here write your code
          }  
      );  
    
                }
            
               
            </script>
    
        </asp:ContentPlaceHolder>

    Best regards,

    Ackerly Xu

    Hi Ackerly Xu,

    It seems that the page do partial postback when i added the following code:

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(  
          function(sender,e){  
              //here write your code
          }  
      );  

    How could i prevent the postback from the page on update panel level also ?

    Best regards,

    Yusuf

    Tuesday, October 23, 2018 3:56 PM