Custom RadProgressArea JS Error

10 posts, 0 answers
  1. Greg
    Greg avatar
    9 posts
    Member since:
    Apr 2011

    Posted 15 Apr 2013 Link to this post

    I'm trying to use the RadProgressArea to show the progress of inserting records into a database but am getting a javascript error which is causing the RadProgressArea fields on subsequent requests to not be updated.  

    I am using a Master page and have the buttons inside a RadPanel bar and am using AJAX thru the RadAjaxManager.  I am using the current version of the RadControls (v.2013.1.403.40).

    Steps to reproduce the error.
    1. Click on Step 1
    2. RadProgressArea fields update successfully
    3. Wait for progress to finish - JS Error appears after process Completes
    4. Click on Step 1 again (RadProgressArea still shows 100% complete)

    Function RadUploadSafariPoller
    }else{try{document.execCommand("Stop");
    }catch(a){window.location.href=window.location.href;
    }}return;
    }}}}var d=typeof(rawProgressData)!="undefined"&&rawProgressData.OperationComplete&&rawProgressData.OperationComplete.toLowerCase()=="true";
    var b=(typeof(rawProgressData)!="undefined")?rawProgressData.InProgress:true;
    if(d){this._stopAsyncPolling();
    Uncaught TypeError: Object #<Object> has no method '_stopAsyncPolling' Default.aspx:38
    RadUploadSafariPoller._handleCallback Default.aspx:38
    (anonymous function) Default.aspx:8
    RadUploadSafariPoller._sendXmlHttpRequest Default.aspx:16
    RadUploadSafariPoller._makeCallback
    return;
    }if(!b){if(this._failureCounter){this._failureCounter++;
    }if(this._failureCounter>10){this._stopAsyncPolling();
    this._failureCounter=1;
    return;
    }}if(this._disposed||d){return;
    }if(!this._isInAsyncUpload&&d){return;

    Master Page - Nothing in .cs
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" >
            </telerik:RadSkinManager>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeOut="600">
            </telerik:RadScriptManager>
     
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
             
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>

    Default.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadPanelBar1" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
     
         <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
                <Items>
                    <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true" >
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    <asp:Button ID="btnStep1" runat="server" Text="Step 1" onclick="btnStep1_Click" />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true" >
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    <asp:Button ID="btnStep2" runat="server" Text="Step 2" onclick="btnStep2_Click"/>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
     
            <telerik:radprogressmanager id="RadProgressManager1" runat="server" />
            <telerik:radprogressarea id="RadProgressArea1" runat="server" displaycancelbutton="False" CssClass="center">
                <ProgressTemplate>
                    <div class="rpaInner">
                            <div class="rpaHeader">
                                <strong>Total Progress</strong>
                            </div>
                            <div class="rpaBody">
                                <dl>
                                    <dt class="rpaStatFirst">Total Progress Percent</dt>
                                    <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                    <dt>Total Progress:</dt>
                                    <dd><span runat="server" id="PrimaryValue"></span></dd>
                                    <dt>Insert Count:</dt>
                                    <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                    <dt>Time Elapsed:</dt>
                                    <dd><span runat="server" id="TimeElapsed"></span></dd>
                                </dl>
                            </div>
                        </div>           
                </ProgressTemplate>
            </telerik:radprogressarea>
    </asp:Content>

    Default.aspx.cs
    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 _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        private void DoSomething(int LoopNum)
        {
            RadProgressContext context = RadProgressContext.Current;
            context.PrimaryValue = 0;
            context.PrimaryPercent = 0;
            context.OperationComplete = false;
     
            context.PrimaryTotal = LoopNum;
            for (int i = 1; i <= LoopNum; i++)
            {
                context.PrimaryValue = i.ToString();
                context.PrimaryPercent = Math.Round((decimal)i / LoopNum * 100, 1).ToString();
                if (!Response.IsClientConnected)
                {
                    //Cancel button was clicked or the browser was closed, so stop processing
                    break;
                }
     
                System.Threading.Thread.Sleep(100);
            }
            context.PrimaryValue = LoopNum;
            context.PrimaryPercent = 100;
            context.CurrentOperationText = "Complete";
            context.OperationComplete = true;
        }
     
        protected void btnStep1_Click(object sender, EventArgs e)
        {
            DoSomething(100);
        }
        protected void btnStep2_Click(object sender, EventArgs e)
        {
            DoSomething(300);
        }
    }


    Thanks,
    Greg
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 18 Apr 2013 Link to this post

    Hi Greg,

    When RadProgressArea is updated from RadAjaxManager and if RadProgressManager exists on the page it also should be updated by the RadAjaxManager:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    <telerik:AjaxUpdatedControl ControlID="RadProgressManager1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


    All the best,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Greg
    Greg avatar
    9 posts
    Member since:
    Apr 2011

    Posted 18 Apr 2013 Link to this post

    I have added the RadProgressManager to the RadAjaxManager and am still getting the same results.

    I also upgraded to the new version (v.2013.1.417.40) and that didn't help either.
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 23 Apr 2013 Link to this post

    Hi Greg,

    I researched this behavior more detailed and I found that it is a development issue reproducible only in Chrome. It is caused by RadProgressManager. I have logged it into our internal system and soon it will be resolved. As for a workaround, you may try to replace RadAjaxManager with Update Panel as a temporary solution:

    <asp:UpdatePanel>
          <ContentTemplate>
                  <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
                  <Items>
                      <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true">
                          <Items>
                              <telerik:RadPanelItem>
                                  <ItemTemplate>
                                      <asp:Button ID="btnStep1" runat="server" Text="Step 1" OnClick="btnStep1_Click" />
                                  </ItemTemplate>
                              </telerik:RadPanelItem>
                          </Items>
                      </telerik:RadPanelItem>
                      <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true">
                          <Items>
                              <telerik:RadPanelItem>
                                  <ItemTemplate>
                                      <asp:Button ID="btnStep2" runat="server" Text="Step 2" OnClick="btnStep2_Click" />
                                  </ItemTemplate>
                              </telerik:RadPanelItem>
                          </Items>
                      </telerik:RadPanelItem>
                  </Items>
              </telerik:RadPanelBar>
     
              <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
              <telerik:RadProgressArea ID="RadProgressArea1" runat="server" DisplayCancelButton="False" CssClass="center">
                  <ProgressTemplate>
                      <div class="rpaInner">
                          <div class="rpaHeader">
                              <strong>Total Progress</strong>
                          </div>
                          <div class="rpaBody">
                              <dl>
                                  <dt class="rpaStatFirst">Total Progress Percent</dt>
                                  <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                  <dt>Total Progress:</dt>
                                  <dd><span runat="server" id="PrimaryValue"></span></dd>
                                  <dt>Insert Count:</dt>
                                  <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                  <dt>Time Elapsed:</dt>
                                  <dd><span runat="server" id="TimeElapsed"></span></dd>
                              </dl>
                          </div>
                      </div>
                  </ProgressTemplate>
              </telerik:RadProgressArea>
          </ContentTemplate>
      </asp:UpdatePanel>


    Kind regards,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Travis Lamkin
    Travis Lamkin avatar
    3 posts
    Member since:
    May 2010

    Posted 17 Jun 2013 Link to this post

    Is there any update on this issue?  We are experiencing the same issue in Chrome.  Our version is 2013.1.417.40.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Jun 2013 Link to this post

    Hi Travis,

    We have already fixed the issue that you are referring to. By using the latest release of the RadControls (Q2 2013) you should not be experiencing any issues. Please give it a try and let us know how it goes. 

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Jay
    Jay avatar
    59 posts
    Member since:
    Apr 2009

    Posted 18 Oct 2013 Link to this post

    I'm unable to upgrade that this time in our design cycle, but I'm unclear how the update panel is used for the work around?
    Please explain.
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Oct 2013 Link to this post

    Hello Jay,

    Did you try replacing the RadAjaxManager with a simple Update Panel as my colleague described in the post of 23-Apr-2013? How did this go?

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. ناصر
    ناصر avatar
    1 posts
    Member since:
    Apr 2015

    Posted 22 Apr 2015 in reply to Greg Link to this post


    Greg said:I'm trying to use the RadProgressArea to show the progress of inserting records into a database but am getting a javascript error which is causing the RadProgressArea fields on subsequent requests to not be updated.  

    I am using a Master page and have the buttons inside a RadPanel bar and am using AJAX thru the RadAjaxManager.  I am using the current version of the RadControls (v.2013.1.403.40).

    Steps to reproduce the error.
    1. Click on Step 1
    2. RadProgressArea fields update successfully
    3. Wait for progress to finish - JS Error appears after process Completes
    4. Click on Step 1 again (RadProgressArea still shows 100% complete)

    Function RadUploadSafariPoller
    }else{try{document.execCommand("Stop");
    }catch(a){window.location.href=window.location.href;
    }}return;
    }}}}var d=typeof(rawProgressData)!="undefined"&&rawProgressData.OperationComplete&&rawProgressData.OperationComplete.toLowerCase()=="true";
    var b=(typeof(rawProgressData)!="undefined")?rawProgressData.InProgress:true;
    if(d){this._stopAsyncPolling();
    Uncaught TypeError: Object #<Object> has no method '_stopAsyncPolling' Default.aspx:38
    RadUploadSafariPoller._handleCallback Default.aspx:38
    (anonymous function) Default.aspx:8
    RadUploadSafariPoller._sendXmlHttpRequest Default.aspx:16
    RadUploadSafariPoller._makeCallback
    return;
    }if(!b){if(this._failureCounter){this._failureCounter++;
    }if(this._failureCounter>10){this._stopAsyncPolling();
    this._failureCounter=1;
    return;
    }}if(this._disposed||d){return;
    }if(!this._isInAsyncUpload&&d){return;

    Master Page - Nothing in .cs
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            </telerik:RadAjaxManager>
            <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" >
            </telerik:RadSkinManager>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeOut="600">
            </telerik:RadScriptManager>
     
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
             
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>

    Default.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadPanelBar1" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadProgressArea1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
     
         <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
                <Items>
                    <telerik:RadPanelItem Text="1: Do Something 100 times" Expanded="true" >
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    <asp:Button ID="btnStep1" runat="server" Text="Step 1" onclick="btnStep1_Click" />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="2: Do Something 300 times" Expanded="true" >
                        <Items>
                            <telerik:RadPanelItem>
                                <ItemTemplate>
                                    <asp:Button ID="btnStep2" runat="server" Text="Step 2" onclick="btnStep2_Click"/>
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
     
            <telerik:radprogressmanager id="RadProgressManager1" runat="server" />
            <telerik:radprogressarea id="RadProgressArea1" runat="server" displaycancelbutton="False" CssClass="center">
                <ProgressTemplate>
                    <div class="rpaInner">
                            <div class="rpaHeader">
                                <strong>Total Progress</strong>
                            </div>
                            <div class="rpaBody">
                                <dl>
                                    <dt class="rpaStatFirst">Total Progress Percent</dt>
                                    <dd class="rpaStatFirst"><span runat="server" id="PrimaryPercent"></span>%</dd>
                                    <dt>Total Progress:</dt>
                                    <dd><span runat="server" id="PrimaryValue"></span></dd>
                                    <dt>Insert Count:</dt>
                                    <dd><span runat="server" id="PrimaryTotal"></span></dd>
                                    <dt>Time Elapsed:</dt>
                                    <dd><span runat="server" id="TimeElapsed"></span></dd>
                                </dl>
                            </div>
                        </div>           
                </ProgressTemplate>
            </telerik:radprogressarea>
    </asp:Content>

    Default.aspx.cs
    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 _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
        private void DoSomething(int LoopNum)
        {
            RadProgressContext context = RadProgressContext.Current;
            context.PrimaryValue = 0;
            context.PrimaryPercent = 0;
            context.OperationComplete = false;
     
            context.PrimaryTotal = LoopNum;
            for (int i = 1; i <= LoopNum; i++)
            {
                context.PrimaryValue = i.ToString();
                context.PrimaryPercent = Math.Round((decimal)i / LoopNum * 100, 1).ToString();
                if (!Response.IsClientConnected)
                {
                    //Cancel button was clicked or the browser was closed, so stop processing
                    break;
                }
     
                System.Threading.Thread.Sleep(100);
            }
            context.PrimaryValue = LoopNum;
            context.PrimaryPercent = 100;
            context.CurrentOperationText = "Complete";
            context.OperationComplete = true;
        }
     
        protected void btnStep1_Click(object sender, EventArgs e)
        {
            DoSomething(100);
        }
        protected void btnStep2_Click(object sender, EventArgs e)
        {
            DoSomething(300);
        }
    }


    Thanks,
    Greg


    Hristo Valyavicharski

    the Telerik team
  11. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 27 Apr 2015 Link to this post

    Hi,

    What version do you have?  The provided version seems to be working. Look at this video:
    http://screencast.com/t/GsGd7CAiE

    Regards,
    Hristo Valyavicharski
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017