Archive

Archive for the ‘Asp.net AJAX’ Category

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

April 11, 2012 3 comments

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