loosing head section after ajax partial postback

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

 

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

 

 

Answer 5

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.

Answer 6

User-1337876127 posted

 Thanks! Will that work for CSS files also?

 Adiel

Answer 7

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");

 

 

Answer 8

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);

 

Answer 9

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.

Answer 10

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 

  

 

Answer 11

User-1337876127 posted

 I have created the following article which summarizes everything above:

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