How can I run some javascript after an update panel refreshes?

I have a pageLoad function that sets some CSS on a .ascx control that I cannot change. On page load everything is fine, but when an update panel updates the control, my CSS is no longer applied. How can I rerun my function after the page updates?

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

This obviously only runs on the initial page load. How can I run it after an update?


Most simple way is to use 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 have used it many times, it works like charm. Most important thing is don't confuse it with document.ready function (which will be executed only once after the page Document Object Model (DOM) is ready for JavaScript code to execute),yet pageLoad Event will get executed every time the update panel refreshes.

Source: Running script after Update panel AJAX asp.net


Adding an add_pageLoaded handler can 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 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/

Add the code in the same form you placed your Script Manager.

Code Behind:

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