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

Question

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?

Tie into the MSAjax pageLoad event on the client side: http://stackoverflow.com/questions/9026496/running-script-after-update-panel-ajax-asp-net — dotnettex, Jun 11 '12 at 19:12

score 107 · Answer 1 · edited May 23 '17 at 11:47

107

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

edited May 23 '17 at 11:47

Community

1
1

answered Jun 07 '13 at 18:18

Kartikay Tripathi

1,243
2
9
6

6

awesome ! i have been looking since a long time for a way to keep javascript executing while update panel refreshes, thanks for your answer ! – Sebastien H. Aug 26 '13 at 12:48
1

Just worked through this situation on a project - this was the simplest and most reliable for me. The `add_pageLoaded` and `RegisterStartupScript` approaches were harder to track & debug through callbacks, but `pageLoad` Just Works(tm) – brichins Jan 30 '15 at 22:24
var firstload = 0; function pageLoad() { if (firstload==0)firstload=1; else { alert('Postback!'); } – mjb Mar 07 '17 at 10:20

score 47 · Accepted Answer · edited May 26 '16 at 11:51

47

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:

edited May 26 '16 at 11:51

Marcel

15,039
20
92
150

answered Jul 27 '09 at 21:07

brianng

5,790
1
32
23

This is great! Also, if there is no explicit Panel (e.g. maybe you're using some Telerik Control that uses UpdatePanels behind the scenes), you can also use `sender._postBackSettings.asyncTarget` to verify if the current postback is the one you're looking for. – Protector one Jun 06 '16 at 08:41

score 16 · Answer 3 · answered May 16 '13 at 06:05

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

score 15 · Answer 4 · answered Jul 27 '09 at 21:01

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.

score 12 · Answer 5 · answered Jul 27 '09 at 21:09

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.

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

5 Answers5

Linked

Related