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

Custom RadProgressArea JS Error

9 Answers 126 Views

ProgressArea

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

Greg asked on 15 Apr 2013, 01:42 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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

9 Answers, 1 is accepted

answered on 18 Apr 2013, 01:21 PM

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.

answered on 23 Apr 2013, 02:14 PM

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>

</ProgressTemplate>

</telerik:RadProgressArea>

</ContentTemplate>

</asp:UpdatePanel>

Kind regards,
Hristo Valyavicharski
the Telerik team

answered on 22 Apr 2015, 10:34 PM

[quote]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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

</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
[/quote]

Hristo Valyavicharski

the Telerik team