This is a migrated thread and some comments may be shown as answers.

RadAjaxManager - Multiple Requests - Confusion

3 Answers 377 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Jason asked on 17 Feb 2010, 10:30 PM

Hello!

I have a very simple example below but am getting confusing results. I was hoping that somebody could help me understand what is happening and how to get the desired results.

I have a RadAjaxManager configured so that an ASP.NET Button's click event updates a div (containing a label), with a corresponding RadAjaxLoadingPanel.

The button's server side click event looks like this:

    
            protected void Button1_Click(object sender, EventArgs e) {  
        
                 // Increment number in Label1  
        
                 int i = Int32.Parse(Label1.Text);  
        
                 Label1.Text = (i + 1).ToString();  
        
                 // Sleep 5 seconds to simulate latency  
        
                 Thread.Sleep(5000);  
        
            }

Currently I have the RadAjaxManager's 'RequestQueueSize' property set to 0, the default. I want to keep it this way so that if a 2nd request occurs before the 1st request's response returns, that 1st request will be cancelled and the 2nd request will be sent.

This is occuring, however, when you click the button twice within that five second wait, two undesrable things happen that I would not have expected to happen.

The loading panel disappears on the 2nd click, even though the 2nd request is still processing. I would like it to stay until the response from the 2nd click returns so that the user knows their 2nd request is still processing. I have even tried forcing this behavior myself using the RadAjaxManager's 'OnRequestStart' and 'OnResponseEnd' client events (with the help of Telerik documentation) but was not able to get the loading panel to remain for both clicks within the 5 seconds. Question: How can I get the loading panel to stay until the 2nd request's response returns? Do I have something configured wrong? Note: I did notice that if I increase the RadAjaxManager's 'RequestQueueSize' that a loading panel remains until the last request's response returns, but unfortunately I need the RequestQueueSize set to 0.
I notice that the order of events for the RadAjaxManager is slightly confusing. I have some client-script that writes out to the screen every time the 'OnRequestStart' and 'OnResponseEnd' events get fired. When I click the button twice within the five second wait, I see that these events get called in the following order:

OnRequestStart
OnRequestStart
OnResponseEnd
OnResponseEnd
OnResponseEnd

Question: Why does the OnResponseEnd get called three times? Note: if you continue to click the button more than twice, the 'OnResponseEnd' event gets called even more times.

Here is my aspx markup. The javascript just writes which events were fired into a div at the bottom of the screen. The two styles are included to better display what is happening.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register TagPrefix="Telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %> 
        
            <!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>  
        
                <script type="text/javascript">  
        
                    function WriteClientEvents(text) {  
        
                        var div = $get("DivClientEvents");  
        
                        div.outerHTML = text + "<br>" + div.outerHTML;  
        
                    }  
        
                    function AjaxRequestStart(sender, args) {  
        
                        WriteClientEvents("Request");  
        
                    }  
        
                    function AjaxResponseEnd(sender, args) {  
        
                        WriteClientEvents("Response");  
        
                    }  
        
                </script> 
        
                <style type="text/css">  
        
                    .loading  
        
                    {  
        
                        border: solid 1px black;  
        
                        background-color: #fff;  
        
                        height: 100px;  
        
                        width: 200px;  
        
                    }  
        
                    #DivTimesClicked   
        
                    {  
        
                        border: solid 1px black;   
        
                        height: 300px;  
        
                        width: 300px;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <Telerik:RadScriptManager ID="rsm1" runat="server">  
        
                    </Telerik:RadScriptManager> 
        
                    <Telerik:RadAjaxManager   
        
                        ID="ram1"   
        
                        runat="server"   
        
                        RequestQueueSize="0"   
        
                    > 
        
                        <ClientEvents OnRequestStart="AjaxRequestStart" OnResponseEnd="AjaxResponseEnd">  
        
                        </ClientEvents> 
        
                        <AjaxSettings> 
        
                            <Telerik:AjaxSetting AjaxControlID="Button1" EventName="Button1_Click">  
        
                                <UpdatedControls> 
        
                                    <Telerik:AjaxUpdatedControl ControlID="DivTimesClicked" LoadingPanelID="LoadingPanel1" /> 
        
                                </UpdatedControls> 
        
                            </Telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </Telerik:RadAjaxManager> 
        
                    <br /><br /> 
        
                    <Telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="" Transparency="30" BackgroundPosition="Center">  
        
                        Loading...  
        
                    </Telerik:RadAjaxLoadingPanel> 
        
                    <asp:Button ID="Button1" runat="server" Text="Increment Times Clicked" OnClick="Button1_Click" /> 
        
                    <br /><br /> 
        
                    <div id="DivTimesClicked" runat="server">  
        
                        Times Clicked:  
        
                        <asp:Label ID="Label1" runat="server" Text="0"></asp:Label> 
        
                    </div> 
        
                    <br /><br /> 
        
                    <h2>RadAjaxManager Client Events...</h2> 
        
                    <hr /> 
        
                    <div id="DivClientEvents">  
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

I look forward to understanding what is happening here. Thank you for your help!
--Jason

3 Answers, 1 is accepted

answered on 19 Feb 2010, 05:41 PM

My post above can be simplified to the following two questions (but feel free to use the code I posted above as an example):

When working with a RadAjaxManager whose 'RequestQueueSize' property is defaulted to 0, when you launch a 2nd asynchronous request before the 1st returns:

Why does the loading panel disappear upon launching the 2nd request as opposed to remaining until that 2nd request is done processing? How can I get the loading panel to stay?
Why do the order of events look like below? That is, why does the 'OnResponseEnd' event get called 3 times instead of 2?
1. OnRequestStart
2. OnRequestStart
3. OnResponseEnd
4. OnResponseEnd
5. OnResponseEnd

Thank you for your time!

answered on 23 Feb 2010, 08:08 AM

Hello Jason,

As you already found, to overcome this behavior you can set he RadAjaxManager RequestQueueSize property so it handles the multiple requests. Note that different browsers handle the async requests different. Usually only the last request finishes and the previous ones are aborted if the RequestQueueSize is set to 0(zero).
However, to make the loading panel stay over the updated div, you either need to increase the RequestQueueSize. Or if you still prefer to leave the RequestQueueSize value to 0, then I suggest you to disable the button in the OnRequestStart client-side event handler and enable it in the OnResponseEnd client-side event handler.

Regards,
Iana
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadAjaxManager - Multiple Requests - Confusion

3 Answers, 1 is accepted