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

Question

I have a pageLoad function which sets some css on an .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?

Answer 1

During your postback for the update panel, in the server code, use ClientScriptManager to add some new script 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 there, and it should execute when the postback returns.

Answer 2

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/archive/2007/03/01/1501.aspx
• http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

Answer 3

You can also bind to an event in client side code (JavaScript) every time an UpdatePanel has finished like this:

        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 is loaded the function will be called on the correct time.