locked
loosing head section after ajax partial postback RRS feed

  • Question

  • User-1337876127 posted

     Hello, I am using an updatepanel in a user control.  I have the following code in the user control with is called every single time from page_load of the user control:

     

            private void addHeadCode()
            {

                // Create new Literal Control to hold date time picker Header Information
                LiteralControl litDateTimePickerHead = new LiteralControl();
                StringBuilder sb = new StringBuilder();

                // Setup ID of Literal Control
                litDateTimePickerHead.ID = "litDateTimePickerHead";

                // Append Header Information to StringBuilder Object
                sb.Append("<link href='" + ResolveUrl("~") + "datePicker.css' rel='stylesheet' type='text/css' />");
                sb.Append("<script type='text/javascript' src='" + ResolveUrl("~") + "datePicker.js'></script>");

                // Add Header Information To Literal Control
                litDateTimePickerHead.Text = sb.ToString();

                // Add Literal Control to Page Header
                Page.Header.Controls.Add(litDateTimePickerHead);

            }

     

    Basically the above code places some javascript/css in the HEAD section of the html document required for this user control. Everything works fine EXCEPT when I do a partial postback to the server, the code does not get sent back to the browser.  I believe this is a problem with using AJAX together with Page.Header.Controls.Add in the since that the data from the Page.Header.Controls.Add is not sent back when an ajax partial postback is initiated.  I have also seem some mention that the correct object to use in an Ajax partial postback is the ScriptManager object. The question is (whether it involves using the ScriptManager object or not doesn't matter to me), how do I get this code back to the client and have it appear in the HEAD section of the html the same way that Page.Header.Controls.Add places the code in the HEAD section?

     

    Thanks Before Hand,
    Adiel

     

    Monday, January 5, 2009 4:54 PM

Answers

All replies

  • User2022958948 posted

    Hi,

    During the asynchronous postback, the content outside UpdatePanel will not be updated.

    To update the content in head section, I suggest you register JavaScript to create the content in Head section, rather than add asp.net control.

    In this way, you can modify your function addHeadCode. ScriptManager.RegisterStartupScript can help you to register JavaScript to build content in Head section.

    To create element by JavaScript, please check this link: http://programming.top54u.com/post/Javascript-Create-New-Div-HTML-Element-Dynamically.aspx

    Wednesday, January 7, 2009 2:18 AM
  • User-1337876127 posted

     Thank you for your response Vince.  Here are the results of the research you recommended:

      >>During the asynchronous postback, the content outside UpdatePanel will not be updated

    If only the content inside the UpdatePanel is being updated, then why is the head section inserted from the previous call to addHeadCode now missing from the new html stream returned from the asynchronous postback? (Is this a bug?)

    >>To update the content in head section, I suggest you register JavaScript to create the content in Head section, rather than add asp.net control.

    >>In this way, you can modify your function addHeadCode. ScriptManager.RegisterStartupScript can help you to register JavaScript to build content in Head section.

    I tried the following using scriptmanager:

            private void addHeadCode()
            {

                    StringBuilder sb = new StringBuilder();

                    // Append Header Information to StringBuilder Object
                    sb.Append("<link href='" + ResolveUrl("~") + "datePicker.css' rel='stylesheet' type='text/css' />");
                    sb.Append("<script type='text/javascript' src='" + ResolveUrl("~") + "datePicker.js'></script>");

                    // Add Script to page (must use ScriptManager for ajax-enabled pages)
                    ScriptManager.RegisterStartupScript(uppDateTimePicker, uppDateTimePicker.GetType(), "key_" + txtDateTime.ClientID, sb.ToString(), false);

            }

     

    It fails in an internal asp.net function called Sys.Net.XMLHttpExecutor = function Sys$Net$XMLHttpExecutor() {...

    with the following message: Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: The script tag registered for type 'System.Web.UI.UpdatePanel' and key 'key_ctl00_mainBody_usrFormSheet1_frvFormSheet_dtpFromDate_txtDateTime' has invalid characters outside of the script tags: <link href='/DateTimePicker/datePicker.css' rel='stylesheet' type='text/css' />. Only properly formatted script tags can be registered

     

     

    >>To create element by JavaScript, please check this link: http://programming.top54u.com/post/Javascript-Create-New-Div-HTML-Element-Dynamically.aspx

     I did not see any examples in the above link on how to add code to the HEAD section of the html.

     

    Thanks,
    Adiel

    Wednesday, January 7, 2009 9:58 AM
  • User-1337876127 posted
    I came up with a workaround.  I still could not fix the problem though.  Whenever I am using the user control as a result of a postback, I will force a full postback instead of a partial postback.  The button that causes the entry of the user control containing the addHeadCode to be intiated at a postback will now contain special code to force the full postback as follows:

    Button btnEdit = (Button)frvFormSheet.FindControl("btnEdit");

    ScriptManager.GetCurrent(Page).RegisterPostBackControl(btnEdit);

    This causes a full postback [:S] but at least now the head code area above is correctly populated and problem solved.  I would love to see a solution showing how to send code to the head element and at the same time performing a partial postback. (An actual working sample code). But in the meantime, the above fixed my problem.

    Thanks,
    Adiel

    Wednesday, January 7, 2009 4:46 PM
  • User-1337876127 posted

    Ok, it looks like I should not use the above code "rig" I wrote.  There are too many places where I will need a full postback if I use the above code. This will hinder the benefits of using Ajax in my application. [*-)] So again, does anyone know how to place code to reference css and javascripts such as these two lines I need in the head section after a partial postback (see code above):

     

      <link href='datePicker.css' rel='stylesheet' type='text/css' />
      <script type='text/javascript' src='datePicker.js'></script>

    This cannot be impossible. I am sure there must be someone out there who has ran into this before and has a sample code on how to send this code back to the client to the <head> section on an Ajax partial postback. Another thing I would like to check is if the two lines above already exist, dont send them again. (In this example, this would happen if there are two of the above date picker user controls in one page)

    Thanks Before Hand,
    Adiel

     

     

    Thursday, January 8, 2009 4:36 PM
  • User-1404703660 posted

    if all you are looking for is sending include file to client on partial postback you can try folllowing code.

    ScriptManager.RegisterClientScriptInclude(this, typeof(classname), "uniquekey", "xxx.js" )

    when calling above method from a user control make sure 'classname' matches user control class name not Page class name.

    Thursday, January 8, 2009 4:46 PM
  • User-1337876127 posted

     Thanks! Will that work for CSS files also?

     Adiel

    Thursday, January 8, 2009 5:04 PM
  • User-1404703660 posted

    I dont think it takes css though. See if  following code works for css

    1) Add  a server control

    <link rel="stylesheet" runat="server" id="CustomCSS" />

    2) Now from code behind  set the css 'href'

    CustomCSS.Attributes.Add("href", "css_url");

     

     

    Thursday, January 8, 2009 5:18 PM
  • User-1171043462 posted

    to attch dynamic css

    var head = document.getElementsByTagName("HEAD")[0];

     

    var css = document.createElement("LINK");

    css.rel="Stylesheet";

    css.href = "style.css";

    head.appendChild(css);

     

    to attach scripts

    var script = document.createElement("SCRIPT");

    script.src = "script.js";

    script.type = "text/javascript";

    head.appendChild(script);

     

    Friday, January 9, 2009 1:12 AM
  • User-1935625286 posted

     Hi Adiel,

    Refer this link (Though not Ajax specific, it will help you understand how/where to inject Javascript or anything in a page):

    http://msdn.microsoft.com/en-us/library/aa478975.aspx

    Then refer:

    http://mrrodd.wordpress.com/2007/07/01/injecting-javascript-from-an-ajax-update-panel/

    which I think is what you want.

    Good luck.

    Friday, January 9, 2009 1:16 AM
  • User-1337876127 posted

     I got it to work! [:D] Thanks for everyone's help.  Special thanks to cbhumireddy for getting me in the right direction.  I got it two work with just two lines of code:

     

    // Register a CSS file during a partial postback
    ScriptManager.RegisterClientScriptBlock(this, typeof(dateTimePicker), "datePicker.css", "<link href='" + ResolveUrl("~") + "datePicker.css' rel='stylesheet' type='text/css' />", false);
    // Register a Javascript include file during a partial postback
    ScriptManager.RegisterClientScriptInclude(this, typeof(dateTimePicker), "datePicker.js", ResolveUrl("~") + "datePicker.js");
    Thanks,
    Adiel
      


     

    Friday, January 9, 2009 8:10 AM
  • User-1337876127 posted

     I have created the following article which summarizes everything above:

    http://www.codeproject.com/KB/ajax/addingCssJsAjaxPartialPos.aspx

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 9, 2009 11:01 AM