Loading ...

Call JavaScript function after UpdatePanel has fired server side code | CodeAsp.Net

Call JavaScript function after UpdatePanel has fired server side code

 /5
0 (0votes)

Today a person asked on the forums on how to call a function or execute a JavaScript code after UpdatePanel processing is completed. I decided to write a blog on the solution which I gave to him. Actually we need to hook the events which are fired when the update panel is done with its processing and the event is Sys.WebForms.PageRequestManager endRequest Event. From MSDN

Sys.WebForms.PageRequestManager endRequest Event: Raised after an asynchronous postback is finished and control has been returned to the browser. 

So we need to hook this event in order execute a JavaScript code after the processing of UpdatePanel is done. Below is the sample code:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body onload="foo()">
    <script type="text/javascript">
        function foo()
        {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }
        function endRequestHandler(sender, args)
        {
            // Do your stuff
            alert('Update Panel work is done');
        }
    </script>
    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
            <asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
<script runat="server">


    protected void btnTest_Click(object sender, EventArgs e)
    {
        lblTest.Text="Server side code fired";
    }
    
</script>


Above the "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);" line will hook the "endRequestHandler" function and this function will be called when update panel is done with its processing in server side.
I have used one label too and its value be change when button is clicked , this will confirm us that our server side code is executed.

 

Do let me know your feedback, comments

 

Comments (1)

   
hajan
Very interesting.I've prepared a blog post about this too - However, I have something to add up .
10/5/2010
 · 
by

Top Posts