[Solved] Fire Ajax Event OnResponseEnd

[Mike]

Perhaps you can shed light on a problem I can't seem to wrap my head around.

I have a page with a button and two panels.  On button click, I will run a merge process that will take a while to complete.  When the merge is completed, I'd like to update panel #1 with a complete messsage.  Then I'd like it to automatically fire another process which creates invididual files, and again will take a while to complete.  When that is finished, update panel #2 with a complete message.

I've tried tying the end of the first call to use AjaxManager's OnResponseEnd, but there's a slight problem.  Since the reponse is ending each time, it's getting fired over and over again.  Is there another way I can achive this functionality? 

My code so far:

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">

                function OnResponseEnd(sender, args) {

                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest("individual");
                }

            </script>
        </telerik:RadCodeBlock>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelMerge" runat="server" Skin="Office2007" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelIndividual" runat="server" Skin="Office2007" />

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <ClientEvents OnResponseEnd="OnResponseEnd" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnRun">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlMerge" LoadingPanelID="RadAjaxLoadingPanelMerge" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlIndividual" LoadingPanelID="RadAjaxLoadingPanelIndividual" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <asp:Button runat="server" ID="btnRun" OnClick="btnRun_Click" Text="Run" />

        <table>
            <tr>
                <td>
                    <asp:Panel runat="server" ID="pnlMerge" Height="100px" Width="200px" BorderWidth="1">
                        <asp:Label runat="server" ID="lblMerge" />
                    </asp:Panel>
                </td>
                <td>
                    <asp:Panel runat="server" ID="pnlIndividual" Height="100px" Width="200px" BorderWidth="1">
                        <asp:Label runat="server" ID="lblIndividual" />
                    </asp:Panel>
                </td>
            </tr>
        </table>

protected void btnRun_Click(object sender, EventArgs e)

{               // run the merge

System.Threading.Thread.Sleep(2000);

lblMerge.Text = "Merge Complete";

}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

if (e.Argument == "individual")

{                   // run the individual

System.Threading.Thread.Sleep(2000);

lblIndividual.Text = "Individual Complete";

}

}

Thanks so much!

-- Mike

[Veli]

Hi Mike,

The approach you have taken is correct. You need to use the OnResponseEnd client event of the AJAX manager to fire the next request. However, as ResponseEnd fires at the end of each AJAX request, you will be going into an infinite loop. You need to incorporate external checks to see if the next AJAX request should be fired.

Greetings,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mike]

Thanks for confirming I was on the right track, apparently I know what I am doing :)

FYI - I added in a global javascript variable to determine whether or not the second process was run and it works like a charm.

            <script type="text/javascript">

                var _individualRun;

                function OnResponseEnd(sender, args) {
                    if (!_individualRun) {
                        $get("lblIndividual").innerHTML = "Running individual...";
                        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                        ajaxManager.ajaxRequest("RunIndividual");
                        _individualRun = true;
                    }
                    else {
                        // individual completed
                        $get("btnRun").disabled = false;
                    }
                }

                function btnRunClientClick() {
                    _individualRun = false;
                    $get("lblMerge").innerHTML = "Running merge...";
                    $get("lblIndividual").innerHTML = "Waiting for merge to complete...";
                    $get("btnRun").disabled = true;
                }

            </script>