Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > How to display progress bar for long running page in Javascript

Reply
Thread Tools

How to display progress bar for long running page in Javascript

 
 
Anonieko
Guest
Posts: n/a
 
      02-04-2006
Query: How to display progress bar for long running page

Answer:

Yet another solution. REFERENCE:
http://www.eggheadcafe.com/articles/20050108.asp

My only regret is that when click the browser back button, it loads the
progress bar again.
Any solution to this?

 
Reply With Quote
 
 
 
 
ElronVel
Guest
Posts: n/a
 
      02-04-2006
here is the code



------Article highlights

There are probably half a dozen or more ways to accomplish this task,
including using a hidden IFRAME with Remote Scripting, using the
XMLHTTP COM object from the client side (a technique that is actually
used in ASP.NET 2.0 with partial page caching and callbacks), using
popup windows, and other little tricks. The one I present here is one
of the simplest. It uses an intermediate page with some timed script on
the client side that has actually loaded the destination page with the
long running process in the background. All you do is have a button or
hyperlink in the page that wants to call the long - running page which
really loads the intermediate script page, and has the real destination
page on the querystring, like so:

<A HREF="ProgressPage.aspx?destPage=EndPage.aspx">Kic k off long running
process</a>

The "ProgressPage.aspx" has client script that looks like this:

<title>Loading, please wait...</title>
<script>
var ctr = 1;
var ctrMax = 50; // how many is up to you-how long does your end page
take?
var intervalId;
function Begin()
{
//set this page's window.location.href to the target page
window.location.href = "<%= Request.QueryString["destPage"]%>";
// but make it wait while we do our progress...
intervalId = window.setInterval("ctr=UpdateIndicator(ctr, ctrMax)",
500);
}
function End() {
// once the interval is cleared, we yield to the result page (which
has been running)
window.clearInterval(intervalId);
}

function UpdateIndicator(curCtr, ctrMaxIterations)
{
curCtr += 1;
if (curCtr <= ctrMaxIterations) {
indicator.style.width =curCtr*10 +"px";
return curCtr;
}
else
{
indicator.style.width =0;
return 1;
}
}
</script>
</HEAD>
<body onload="Begin()" onunload="End()">
<form id="Form1" method="post" runat="server">
<div align=center><h3>Loading Data, please wait...</h3></div>
<table id=indicator border="0" cellpadding="0" cellspacing="0"
width="0" height="20" align="center" >
<tr>
<td align="center" bgcolor=red width="100%"></td>
</tr>
</table>
</form>
</body>



What the above script does is as follows:

In Body onload, Begin() is called. This immediately sets the
location.href property of the window to the final page, which begins
loading immediately in the background while the rest of the script
runs.
We set the intervalId variable to the call to
window.setInterval("ctr=UpdateIndicator(ctr, ctrMax)", 500); which sets
a timed call to the UpdateIndicator method every 500 milliseconds.
UpdateIndicator increments the ctr variable and increase the DHTML
width of table "indicator' to the value of ctr * 10 pixels. This is
client side DHTML code so it executes in the browser immediately.
When the target page has completed loading, the onUnload event is
called and the interval timer is cleared in the End() method Your end
page will then take over and you will see the result.
In my Endpage.aspx, the page with the long running process, I've put in
a routine that actually does some real work that takes time (instead of
Thread.Sleep(xxx) which most examples would show):

private void Page_Load(object sender, System.EventArgs e)
{
//Kick off your long running process here...
// this is just a surrogate for whatever long running
//process your page does.
Response.Write("<ul>");
WebClient wc= new WebClient();
for(int i= 1; i<40;i++)
{
byte[] b=wc.DownloadData("http://www.microsoft.com");
Response.Write("<li>Got Microsoft " + i.ToString()+" Length: " +
b.Length.ToString());
}
Response.Write("</ul>");
}



The above code uses the WebClient class to request the Microsoft home
page 40 times, and each time the result comes back, it adds a line with
some info to an unordered list.

The result of all this is that when the user clicks the link to go to
the long-running page, they will first see our Progress page with a red
indicator that steadily increases in width until the target page has
completed processing:

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Having compilation error: no match for call to (const __gnu_cxx::hash<long long int>) (const long long int&) veryhotsausage C++ 1 07-04-2008 05:41 PM
Show progress bar during page Load code running . . akantrowitz@hotmail.com ASP .Net 2 01-15-2007 06:46 AM
javascript to disable the title bar, status bar, and address bar of a window Matt Javascript 9 08-23-2004 01:23 PM
Progress bar to show the progress of a task Charlie Zhang Java 3 08-16-2004 05:53 PM
How to show progress in the client browser for a long-running ASP.NET page? Anonieko Ramos ASP .Net 0 04-14-2004 08:47 AM



Advertisments