Home > Asp.net, Asp.net AJAX > Calling different client side function after ASP.net Ajax request completes

Calling different client side function after ASP.net Ajax request completes

Hi Friends,
While working in ASP.net we come across some situation where we need call custom JavaScript function after Ajax call completes, we can achieve this using add_endRequest as shown in following code –

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

But what in case where we have multiple update panels on the same aspx page?
If we want different action to be performed for each update panel then we need to track the sender of the endRequest and accordingly we can give the call to appropriate JavaScript function.
Following code will show how to achieve this –
In Head tag –

    <script type="text/javascript">

        window.onload = function () { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); };

        function EndRequestHandler(sender, args)

        {

           // It will get called after each asynchronous postback
           if (sender._postBackSettings.sourceElement.id == '<%= btn_first.ClientID %>')
              alert('Here First update panel\'s request completed...');
        else if (sender._postBackSettings.sourceElement.id == '<%= btn_second.ClientID %>')
              alert('Here Second update panel\'s request completed...');
        }

</script>

In Body following ASP.Net controls available

<asp:ScriptManager runat="server" ID="SCM"></asp:ScriptManager>
    <asp:Panel runat="server" ID="pnl">
    <asp:UpdatePanel runat="server" ID="upanelFirst">
    <ContentTemplate>
    <asp:Button runat="server" ID="btn_first" Text="First" OnClick="testbtn_Click" />

    </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdatePanel runat="server" ID="upanelSecond">
    <ContentTemplate>
    <asp:Button runat="server" ID="btn_second" Text="Second" OnClick="testbtn1_Click" />

    </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdateProgress runat="server" ID="uprogress">
    <ProgressTemplate>
    Loading...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </asp:Panel>

Now as shown in the example I have checked the id of the sender control i.e. the control who raised the post back.

Happy coding…

Advertisements
  1. Hemant Kamalakar
    April 11, 2012 at 12:09 pm

    Thanks for sharing Prasad!!!

  2. April 17, 2012 at 11:14 am

    Nice and informative post on Asp .net Ajax. I have added one more knowledge on asp.net ajax, thanks to your post

    I have wordpress blog post Asp .net backgroundworker example using PageMethods on client script. This Pagemethods have success and failed callback function to ajax request.

    http://gugiaji.wordpress.com/2012/04/17/asp-net-ajax-backgroundworker-example-using-client-script-pagemethods/

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: