Multiple RadAjaxPanel's invoked on pageLoad causes errors

[Nathan]

We are having a problem with our implementation of the RadAjaxPanels and are looking for some assitance and help understanding why we are seeing the behavior we are seeing. We also think there may be a bug involved?

The issue is that we need to have multiple AjaxPanels on a page. We want to load the content in them after the page loads. There may be a lot of content in each, so we want to fire off separate ajax requests for each one and have the data be handled as it returns.

We are making use of the javascript function:

    function pageLoad(sender, args) {
        if (args._isPartialLoad == false) {
            $find("RadAjaxPanel1").ajaxRequest();
            $find("RadAjaxPanel2").ajaxRequest();
        }
    }

However, we cannot get this to work properly. We have found that if we put more than 1 ajax request into the function above, we get strange behavior, even if requests are queued. We do not get the exact same behavior every time, but often we get:

1) Only 1 of the requests goes through and as a result only one of the panels gets updated

2) The 2nd request or any subsequent requests are made repeatedly in an infinite loop

3) Every now and then... it works

I have a simple project to reproduce some of these issues, including when using a RadAjaxManager. I also have the HTTP capture of the cases when the 2nd ajaxRequest repeasts in an infinite loop. Please let me how I can upload it. 

Thank you

-- Project notes

-Simple.aspx works fine

-Double.aspx has 2 AjaxPanels and does not work correctly. It has the behavior mentioned above approximately 90% of the time

-DoubleWithManager.aspx also has 2 AjaxPanels. While it functions correctly (since it does not contain 1 ajax calls in the pageLoad function), it is not the functionality we desire, as we want each panel to load asynchronously, not all of them at once, as this does.

In all cases, ajaxrequests done well after the page has fully loaded (such as by clicking one of the buttons) are handled fine. It is only these pageLoad requests that are causing problems.

[Iana Tsolova]

Hello Nathan,

I prepared a sample project for you illustrating different implementations of the desired functionality. Please try it on your end and let me know if any questions arise.
Note that when I used RadAjaxPanels I made two subsequent requests as there is no way to queue different ajax controls requests. Another option is to ajaxify the page through RadAjaxManager and perform single request on initial load. However, if you enable RadAjaxManager ajax requests queueing in the last setup, you can make two requests as desired.

Regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bob]

Hi,

I'm attempting to do something similar -- I have a page that when it has loaded I want to trigger multiple panels to update simultaneously.
One panel may take 3 seconds to load (specific data pertaining to that panel), another may take 6 seconds (loading different data), the other may load in only 1 second (loading yet again something different), but I want each panel to be viewable and usable as it has finished processing.

I can't seem to get this to work -- I'm not sure if I should be using AjaxPanels or AjaxManager or some sort of combination.

I tried messing with the examples posted in the attachment above -- but couldn't get the desired effect.

I also want a LoadingPanel for each panel as well that will go away when each panel finishes (to achieve my goal of having each panel become usable as they finish processing).

Thanks for your help!

[Iana Tsolova]

Hi Jed,

I suggest that you try using RadAjaxManager with enabled queueing for your case (RadAjaxManagerWithQueueing.aspx page of the sample). However, all loading panels will hide just after all the content is being loaded. Another approach would be to perform subsequent ajax requests as it is in the AjaxRequests.aspx and WithRadAjaxManager.aspx page of the sample.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bob]

Thanks for your quick response.

Just to clarify, I did get the closest results I was looking for using RadAjaxManager with queuing -- but the Ajax requests are still queued of course. Is there any way to do multiple requests at the same time -- all finishing independently of each other and not affecting the other?

[Iana Tsolova]

Hi Jed,

I am afraid that scenario with multiple requests at the same time -- all finishing independently of each other cannot be achieved with RadAjaxManager. ANd as you already found, the possible workaround if the ajax queueing.

Please excuse us for the inconvenience.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bob]

Thanks for the timely response again.

I've gotten the implementation to work as suggested, with one minor caveat.

The panels are below the fold near the bottom of the web page and when the page is done loading (before the ajax postbacks) when I scroll down -- when each of the ajax postbacks complete -- my page gets scrolled back up to the very top automatically and I'm not sure why. So I'll be looking at  a panel and as soon as that postback completes I find myself looking at the top of the page again and again. Sometimes I find it hard to even scroll down to those panels at all during page load because the browser is (as I'm scrolling down) scrolling back up. It's very odd behavior.

Any suggestions?

[Bob]

To add on to that, my pageLoad javascript function (which houses the ajaxrequest calls) is getting called 2-3 times when the page loads. I've tried to force it so it'll only get executed once but I'm still having the issue with the page scrolling back to the top. Seems like two separate problems here.

[Iana Tsolova]

Hello Jed,

I am afraid that this behavior is rather expected. Because you are trying to scroll the page after the ajax request has already been started. In order the page scroll position to be maintained, you need to make sure you have scroll the page before that. You can see that is you modify the pageLoad() handler as below and scroll the page before the ajax request is invoked for the first time, the page does not go to top.

function pageLoad (sender, eventArgs) {
    if (eventArgs.get_isPartialLoad() == false) {
        setTimeout(function() {
            $find("RadAjaxManager1").ajaxRequest("Panel1");
            $find("RadAjaxManager1").ajaxRequest("Panel2");
        }, 2000);
    }
}

A possible workaround is to show the loading panel over the whole page so that the user knows the page is being processed.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bob]

I appreciate all of the help you've been providing me Iana .

I still have a question though, or rather, I just want to confirm that there's no way to retain the user's scroll position if they scroll during the time an AJAX postback is in place.

Essentially, I need the page to finish loading as quickly as possible so the user is able to watch multimedia in the top half of the page (which is the only visible half on page load even on a large screen resolution).

A user could theoretically scroll within the first few seconds after the page loads down to the bottom half of the page and if a postback is currently executing, they'll get bumped back to where they were. The really annoying thing is that there are 3 ajax postbacks that take place all together. So if they get bumped up once, they'll probably try to go back down again, and then it'll happen again, and again. Each panel, or section is below the next that does the ajax postback. Is there any viable solution to trying to create a smooth user experience here? Because each panel is below the next, I would almost consider waiting for the panel to be "visible" to the user and then starting the execution maybe half a second after that, but I'm not sure if that is possible with JavaScript. Any insight into this?

Thank you!

[Iana Tsolova]

Hello Jed,

In this case, is it possible to show only one loading panel over the whole page?
Modified sample attached.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve Kowald]

Hi,

I'm experiencing an issue in the ClientEvents-OnResponseEnd event notification for RadAjaxManager when using
ajax queueing with ajax manager version v2009.1.527.35.

What I'm trying to do is pull up a popup RadWindow and before it closes in OnClientBeforeClose()
in the parent, I want to save some information from that window using more than one ajax call. The issue is it appears
the ajax manager is not clearing out the old responses after it calls the on-response-end function. If I pull up the
popup repeately, the responses build up. As a test, I started with this sample
http://www.telerik.com/ClientsFiles/133193_radajax.zip and added a popup to it. I've included the modified sample
below.

Another thing I've noticied is we never actually get a response for the first ajax request, we get duplicate responses
for the second request. This is true even with the original sample with just the 2 loading panels using qued request to load.
You get two responses but they are both for "panel 2"

In OnClientBeforeCloseMyPopup I have the following 2 requests.

 

$find(

"RadAjaxManager1").ajaxRequest("SaveWindowState");

 

$find(

"RadAjaxManager1").ajaxRequest("SaveWindowInfo");

 

 

The first time the popup is displayed I get the following responses:

Panel2
SaveWindowInfo
SaveWindowInfo
Panel2
SaveWindowInfo
SaveWindowInfo

The second time the popup is displayed I get the following responses:

Panel2
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo
Panel2
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo

The third time the popup is displayed I get the following responses:

Panel2
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo
Panel2
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo
SaveWindowInfo

The "Panel2" response above is from the page load in the original sample and I never see
a response for "SaveWindowState".

Here's the modified sample code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadAjaxManagerWithQueueing.aspx.cs" Inherits="RadAjaxManagerWithQueueing" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
        <script type="text/javascript">
            function pageLoad (sender, eventArgs) {
                if (eventArgs.get_isPartialLoad() == false) {
                    $find("RadAjaxManager1").ajaxRequest("Panel1");
                    $find("RadAjaxManager1").ajaxRequest("Panel2");
                }
            }

            // Ajax Request End
            function AjaxManager1_AjaxRequestEnd(sender, EventArgs) {

                alert('Response end: ' + EventArgs.EventArgument);
            }

            // popup window
            function MyPopup() {

                var oWnd = window.radopen(null, "TestPopup");
                if (oWnd != null) {

                }
            }

            // preview popup is about to close, store the location and maximixed state
            function OnClientBeforeCloseMyPopup(oWnd, args) {

                // perform 2 ajax requests
                $find("RadAjaxManager1").ajaxRequest("SaveWindowState");
                $find("RadAjaxManager1").ajaxRequest("SaveWindowInfo");

            }

        </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            ClientEvents-OnResponseEnd="AjaxManager1_AjaxRequestEnd">
            <ClientEvents OnResponseEnd="AjaxManager1_AjaxRequestEnd" />
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ajaxedPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="ajaxedPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ajaxedPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ajaxedPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ajaxedPanel2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ajaxedPanel2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadWindowManager runat="server" ID="RadWindowManager1" KeepInScreenBounds="true"
            EnableEmbeddedSkins="true" Skin="Vista" VisibleStatusbar="false">
            <Windows>
                <telerik:RadWindow ID="TestPopup" Title=" A test popup window"
                    KeepInScreenBounds="true" Skin="Vista" Behaviors="Close,Resize,Maximize,Move" ReloadOnShow="false"
                    VisibleStatusbar="false" Modal="true" runat="server"
                    InitialBehavior="None" OnClientBeforeClose="OnClientBeforeCloseMyPopup">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>

        <asp:Panel ID="ajaxedPanel1" runat="server" Height="200px" Width="200px" style="border: 3px solid red">
            <asp:Panel ID="Panel1" runat="server" Visible="false">
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </asp:Panel>
        </asp:Panel>
        <asp:Panel ID="ajaxedPanel2" runat="server" Height="200px" Width="200px" style="border: 3px solid blue">
            <asp:Panel ID="Panel2" runat="server" Visible="false">
                <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" />
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </asp:Panel>
        </asp:Panel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />

        <table>
            <tr>
                <td>
                    <asp:Button runat="server" ID="btnViewPopup" Height="22px" Text="Display popup"
                        OnClientClick="if(!MyPopup()) return false;"  Visible="true" />
                </td>
            </tr>
        </table>

    </form>
</body>
</html>

 (Note: I included the code-behind but did not change it for my test):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class RadAjaxManagerWithQueueing : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadAjaxManager1.RequestQueueSize = 3;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000);
        Label2.Text = DateTime.Now.ToString();
    }
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "Panel1")
        {
            System.Threading.Thread.Sleep(1000);
            Panel1.Visible = true;
            Label1.Text = DateTime.Now.ToString();
        }
        if (e.Argument == "Panel2")
        {
            System.Threading.Thread.Sleep(1000);
            Panel2.Visible = true;
            Label2.Text = DateTime.Now.ToString();
        }
    }
}

Is this a bug in the AjaxMaanger or am I doing something wrong?

Thank you,
Steve

[Iana Tsolova]

Hi Steve,

You can find the answer of your last post in the other ticket open on this subject.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Devon]

Edited- my problem was unrelated and has been solved, so I removed it.

[Iana Tsolova]

Hi Nathan,

I reviewed your code and I observed you are using RadAjaxManager to ajaxify RadAjaxPanel controls. In this scenario, you can remove the RadAjaxManager at all. Then invoke the ajax request through the corresponding RadAjaxPanel ajaxRequest() method. You also need to set the LoadingPanelID property for the separate RadAjaxLoadingPanel controls.

Best wishes,
Iana
the Telerik team

[Greg]

Jed,
Would you be able to post the solution you got working?  I am trying to get something similar working and am having the same issues with the ajax request running in queue and not at the same time.  I would be very grateful if you could post how you got around that.  I've looked at the samples attached and don't see any working solutions.

Thanks,
Greg

[Maria Ilieva]

Hi Greg,

Could you please explain the exact scenario you are implementing and the functionality you need to achieve. Due to the fact that the forum is a bit outdated and contains a lot of posts it will be best to repost your issue so we could concentrate on your specific scenario and provide more to the point solution.

Kind regards,
Maria Ilieva
the Telerik team

[Greg]

Thanks Maria,
I've created a new thread here - http://www.telerik.com/community/forums/aspnet-ajax/ajax/multiple-ajax-calls-on-pageload.aspx

Greg