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

[Solved] How to prevent request when a different request is already processing.

5 Answers 443 Views

Ajax

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

David Nowak asked on 30 Jan 2008, 12:29 AM

I am using the RadWindowManager in my application to show a form for editing purposes when the uses selects a row from a RadGrid. When the user closes the edit form and returns to the main form (where the grid is located) I automatically refresh the grid by hooking a javascript function to the close event of the edit form, as shown in the last line of the following function:

function OpenEditForm(sender, eventArgs)
{
    var MasterTableView = eventArgs.get_tableView();
    var cell = MasterTableView.getCellByColumnUniqueName
        (MasterTableView.get_dataItems()[eventArgs.get_itemIndexHierarchical
        ()], "BrokerID");
    var oWnd = radopen("./BrokerMaint.aspx?ID=" + cell.innerHTML, "rwBrokerMaint");
    oWnd.add_close(CloseEditForm);
}

Once the user returns back to the main form she can click a button the form that will force a refresh of the grid. The problem is that the refresh that is already occurring automatically may not have yet finished before she selects to refresh again. If this happens, I get an error: "Microsoft JScript runtime error: 'null' is null or not an object"

How do I prevent the RefreshGrid function from executing if a refresh is already taking place? Or, how do I stack one refresh event to occur after another one finishes?

The functions in my code are shown below:

<telerik:RadCodeBlock ID="cb1" runat="server">
<script language="javascript" type="text/javascript">
function CloseEditForm(sender, eventArgs)
{
    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.AjaxRequestWithTarget('<%= RadGrid1.UniqueID %>',"RefreshData");
}

function RefreshGrid()
{
var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
ajaxManager.AjaxRequestWithTarget('<%= RadGrid1.UniqueID %>',"RefreshGrid");
}
</script>
</telerik:RadCodeBlock>

Thank You,

David Nowak

5 Answers, 1 is accepted

answered on 05 Feb 2008, 01:37 PM

Hello Matthew,

Sorry for the misunderstanding -- indeed the proposed solution is applicable to the classic RadAjax control, and not to RadAjax Prometheus. As the latter is based on the ASP.NET AJAX framework it exhibits the same behavior that the MS UpdatePanel does by design (i.e. no request queuing) -- when trying to start an ajax request prior to receiving the response from an ongoing ajax request, the previous request is canceled and the new one is started.

You can review the approach described here to implement request queuing for ASP.NET AJAX as well. We are also planning to integrate a queuing feature for the Q1 release in April.

Kind regards,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 05 Feb 2008, 04:14 PM

Have you been able to apply this approach to the RadAjaxManager.

I have had a quick go at it, I needed to replace my RadScriptManager with the default one as the RadScriptManager did not allow anything in the <Scripts> tag.

Default2.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="_Default2" %> 
        
            <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
        
                Namespace="System.Web.UI" TagPrefix="asp" %> 
        
            <%@ 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>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <asp:ScriptReference Path="PageRequestManagerEx.js" /> 
        
                    </Scripts> 
        
                    </asp:ScriptManager> 
        
                    <script type="text/javascript">  
        
                        PageRequestManagerEx.init();  
        
                    </script> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="TextBox1" /> 
        
                                <telerik:AjaxUpdatedControl ControlID="TextBox2" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><a href="#" onclick="update1()">111111111</a> 
        
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><a href="#" onclick="update2()">222222222</a> 
        
                    <script type="text/javascript">  
        
                    function update1()  
        
                    {  
        
                        RadAjaxManager1.AjaxRequest('1');  
        
                    }  
        
                    function update2()  
        
                    {  
        
                        RadAjaxManager1.AjaxRequest('2');  
        
                    }          
        
                    </script> 
        
                </form> 
        
            </body> 
        
            </html>

Default2.cs

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            public partial class NewUI_Default2 : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
        
                {  
        
                    System.Threading.Thread.Sleep(5 * 1000);  
        
                    switch (e.Argument)  
        
                    {  
        
                        case "1":  
        
                            TextBox1.Text = DateTime.Now.ToLongTimeString();                  
        
                            break;  
        
                        case "2":  
        
                            TextBox2.Text = DateTime.Now.ToLongTimeString();  
        
                            break;  
        
                    }  
        
                }  
        
            }

PageRequestManagerEx.js

    
            var PageRequestManagerEx =  
        
            {  
        
                _initialized : false,  
        
                init : function()  
        
                {  
        
                    if (!PageRequestManagerEx._initialized)  
        
                    {  
        
                        var _prm = Sys.WebForms.PageRequestManager.getInstance();  
        
                        var _callQueue = new Array();  
        
                        var _executingElement = null;  
        
                        _prm = Sys.WebForms.PageRequestManager.getInstance();  
        
                        _prm.add_initializeRequest(initializeRequest);  
        
                        _prm.add_endRequest(endRequest);  
        
                        PageRequestManagerEx._initialized = true;  
        
                    }  
        
                    function initializeRequest(sender, args)  
        
                    {  
        
                        if (_prm.get_isInAsyncPostBack())  
        
                        {  
        
                            //if we are here that means there already a call pending.  
        
                            //Get the element which cause the postback  
        
                            var postBackElement = args.get_postBackElement();  
        
                            //We need to check this otherwise it will abort the request which we made from the  
        
                            //end request  
        
                            if (_executingElement != postBackElement)  
        
                            {  
        
                                //Item does not match which means it is another control  
        
                                //which request the update, so cancel it temporary and   
        
                                //add it in the call queue  
        
                                args.set_cancel(true);  
        
                                Array.enqueue(_callQueue, postBackElement);  
        
                            }  
        
                            //Reset it as we are done with our matching  
        
                            _executingElement = null;  
        
                        }  
        
                    }  
        
                    function endRequest(sender, args)  
        
                    {  
        
                        //Check if we have a pending call  
        
                        if (_callQueue.length > 0)  
        
                        {  
        
                            //Get the first item from the call queue and setting it  
        
                            //as current executing item  
        
                            _executingElement = Array.dequeue(_callQueue);  
        
                            //Now Post the from which will also fire the initializeRequest  
        
                            _prm._doPostBack(_executingElement.id, '');  
        
                        }  
        
                    }  
        
                }  
        
            }  
        
            if (typeof(Sys) != 'undefined')  
        
            {  
        
                Sys.Application.notifyScriptLoaded();  
        
            }

answered on 05 Feb 2008, 04:36 PM

Taking a closer look at the the thread somebody posted a method that maintained the event arguments of the ajax request, with a minor correction by myself; changing element.name to element.id on line 62 I got it to work with RadAjaxManager.AjaxRequest()

Magic! Here is the fixed up js file.

    
            var PageRequestManagerEx =  
        
            {  
        
                _initialized : false,  
        
                init : function()  
        
                {  
        
                    if (!PageRequestManagerEx._initialized)  
        
                    {  
        
                        var _prm = Sys.WebForms.PageRequestManager.getInstance();  
        
                        var _callQueue = new Array();  
        
                        var _executingElement = null;  
        
                        _prm = Sys.WebForms.PageRequestManager.getInstance();  
        
                        _prm.add_initializeRequest(initializeRequest);  
        
                        _prm.add_endRequest(endRequest);  
        
                        PageRequestManagerEx._initialized = true;  
        
                    }  
        
                    function initializeRequest(sender, args)  
        
                    {  
        
                        if (_prm.get_isInAsyncPostBack())  
        
                        {  
        
                            //if we are here that means there already a call pending.  
        
                            //Get the element which cause the postback  
        
                            var postBackElement = args.get_postBackElement();  
        
                            //We need to check this otherwise it will abort the request which we made from the  
        
                            //end request  
        
                            if (_executingElement != postBackElement)  
        
                            {  
        
                                // Grab the event argument value  
        
                                var evArg = $get("__EVENTARGUMENT").value;  
        
                                //Does not match which means it is another control  
        
                                //which request the update, so cancel it temporary and   
        
                                //add it in the call queue  
        
                                args.set_cancel(true);  
        
                                Array.enqueue(_callQueue, new Array(postBackElement, evArg));  
        
                            }  
        
                            //Reset it as we are done with our matching  
        
                            _executingElement = null;  
        
                        }  
        
                    }          
        
                    function endRequest(sender, args)  
        
                    {  
        
                        //Check if we have a pending call  
        
                        if (_callQueue.length > 0)  
        
                        {  
        
                            //Get the first item from the call queue and setting it  
        
                            //as current executing item  
        
                            _executingElement = Array.dequeue(_callQueue);  
        
                            var _element = _executingElement[0];  
        
                            var _eventArg = _executingElement[1];  
        
                            //Now Post the from which will also fire the initializeRequest  
        
                            _prm._doPostBack(_element.id, _eventArg);  
        
                        }  
        
                    }   
        
                }  
        
            }  
        
            if (typeof(Sys) != 'undefined')  
        
            {  
        
                Sys.Application.notifyScriptLoaded();  
        
            }