How to run javascript after updating the update panel?

Question

I have a pageLoad function that sets some css in a .ascx control that I cannot change. When the page loads, everything is fine, but when the update panel updates the control, my css is no longer applied. How to restart my function after page refresh?

$(function() { $("textarea").attr("cols", "30"); $("input.tbMarker").css({ "width": "100px" }).attr("cols","25"); }); 

This obviously only works when loading the start page. How to start it after updating?

Answer 1

Adding an add_pageLoaded handler may also work.

 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoadedHandler); 

Note: the handler will fire for any callback, but you can use sender._postBackSettings.panelID to filter when you want your function to be called.

More samples:

• http://blog.jeromeparadis.com/2007/03/01/1501/
• http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

Answer 2

The easiest way is to use the MSAjax pageLoad Event in your javascript code:

 <script> ///<summary> /// This will fire on initial page load, /// and all subsequent partial page updates made /// by any update panel on the page ///</summary> function pageLoad(){ alert('page loaded!') } </script> 

I used it many times, it works like a charm. The most important thing is not to confuse it with the document.ready function (which will be executed only once after the Document Object Model (DOM) page is ready to execute JavaScript code), but the pageLoad event will be executed every time the refresh panel refreshes.

Source: Running script after asp.net AJAX update panel

Answer 3

During the postback for the update panel in the server code, use the ClientScriptManager to add several new scripts to the page, something like this:

 ClientScriptManager.RegisterStartupScript( typeof(page1), "CssFix", "javascriptFunctionName()", true); 

Encapsulate your javascript in a named function that matches the third argument, and it should execute when the postback is returned.

Answer 4

Add the code in the same way as your Script manager.

Code for:

 protected void Page_Load(object sender, EventArgs e) { if (ScriptManager1.IsInAsyncPostBack) { StringBuilder sb = new StringBuilder(); sb.Append("<script language='javascript' type='text/javascript'>"); sb.Append("Sys.Application.add_load(func);"); sb.Append("function func() {"); sb.Append("Sys.Application.remove_load(func);"); sb.Append("alert('I am Batman!');"); sb.Append("}"); sb.Append("</script>"); ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false); } } 

Answer 5

You can also bind an event to client-side code (JavaScript) each time the UpdatePanel completes as follows:

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){myFunction();}); 

So, in this case myFunction (); will be called every time an UpdatePanel postback has occurred. If you execute this code when the page loads, the function will be called at the right time.