«

I am trying to do the following:

1. set the contents of div "displayarea" to show a status update bar
2. process some data and format the result into HTML (this may take
time, depending upon the amount of data to process)
3. reload the contents of the div "displayarea" with the html
generated in step 2.

The problem is that the display does not get updated after step 1, so
I am looking at a blank screen, instead of the status bar. Is there a
command that I can issue after I set the html in step 1 to flush the
display changes and force the browser (Firefox and IE) to redraw the
display while step 2 continues?

On Jul 16, 2:48 pm, Darcy <darcyka...@gmail.com> wrote:
> I am trying to do the following:
>
> 1. set the contents of div "displayarea" to show a status update bar
> 2. process some data and format the result into HTML (this may take
> time, depending upon the amount of data to process)
> 3. reload the contents of the div "displayarea" with the html
> generated in step 2.
>
> The problem is that the display does not get updated after step 1, so
> I am looking at a blank screen, instead of the status bar. Is there a
> command that I can issue after I set the html in step 1 to flush the
> display changes and force the browser (Firefox and IE) to redraw the
> display while step 2 continues?

Post the code.

On Jul 16, 2:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Jul 16, 2:48 pm, Darcy <darcyka...@gmail.com> wrote:
>
> > I am trying to do the following:
>
> > 1. set the contents of div "displayarea" to show a status update bar
> > 2. process some data and format the result into HTML (this may take
> > time, depending upon the amount of data to process)
> > 3. reload the contents of the div "displayarea" with the html
> > generated in step 2.
>
> > The problem is that the display does not get updated after step 1, so
> > I am looking at a blank screen, instead of the status bar. Is there a
> > command that I can issue after I set the html in step 1 to flush the
> > display changes and force the browser (Firefox and IE) to redraw the
> > display while step 2 continues?
>
> Post the code.

An example:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

var dpt = 0;

function setPercent()
{
var i, j, tmp;
for (i=0; i<20; i++)
{
for (j=0; j<999999; j++)
{
tmp=i*j;
}
dpt += 5;
if (dpt>100)
dpt = 0;
var obj = MM_findObj('progbar');
obj.style.width = dpt+"%";
}
}
//-->
</script>



Body:

<table width="100%" height="100%">
<tr><td align="center" valign="center">
<p><b>Searching....<br>Please Wait</b></p>
<div align="left" style="width: 200px; height: 10px; border: 2px solid
black; background: #D0D0D0; font-size: 2px;">
<div id="progbar" name="progbar" style="top: 0px; left: 0px; height:
100%; width: 0%; background: blue; font-size: 2px;">&nbsp;</div>
</div>
<button onClick="setPercent()">do it</button>
</td></tr></table>


The goal, is to display the body in step 1, with the code above
simulating a load for step 2. Running this, you get the status bar
suddenly displayed at the end, and not incremented (visually) during
the load of the parse. This same effect happens if the body listed
above were programatically created at the beginning.

On Jul 16, 3:14 pm, Darcy <darcyka...@gmail.com> wrote:
> On Jul 16, 2:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
>
>
>
>
> > On Jul 16, 2:48 pm, Darcy <darcyka...@gmail.com> wrote:
>
> > > I am trying to do the following:
>
> > > 1. set the contents of div "displayarea" to show a status update bar
> > > 2. process some data and format the result into HTML (this may take
> > > time, depending upon the amount of data to process)
> > > 3. reload the contents of the div "displayarea" with the html
> > > generated in step 2.
>
> > > The problem is that the display does not get updated after step 1, so
> > > I am looking at a blank screen, instead of the status bar. Is there a
> > > command that I can issue after I set the html in step 1 to flush the
> > > display changes and force the browser (Firefox and IE) to redraw the
> > > display while step 2 continues?
>
> > Post the code.
>
> An example:
>
> <script language="JavaScript" type="text/JavaScript">
> <!--
> function MM_findObj(n, d) { //v4.01
> var p,i,x; if(!d) d=document;
> if((p=n.indexOf("?"))>0&&parent.frames.length) {
> d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
> x=d.forms[i][n];
> for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> x=MM_findObj(n,d.layers[i].document);
> if(!x && d.getElementById) x=d.getElementById(n); return x;
>
> }
>
> var dpt = 0;
>
> function setPercent()
> {
> var i, j, tmp;
> for (i=0; i<20; i++)
> {
> for (j=0; j<999999; j++)
> {
> tmp=i*j;
> }
> dpt += 5;
> if (dpt>100)
> dpt = 0;
> var obj = MM_findObj('progbar');
> obj.style.width = dpt+"%";
> }}
>
> //-->
> </script>
>
> Body:
>
> <table width="100%" height="100%">
> <tr><td align="center" valign="center">
> <p><b>Searching....<br>Please Wait</b></p>
> <div align="left" style="width: 200px; height: 10px; border: 2px solid
> black; background: #D0D0D0; font-size: 2px;">
> <div id="progbar" name="progbar" style="top: 0px; left: 0px; height:
> 100%; width: 0%; background: blue; font-size: 2px;">&nbsp;</div>
> </div>
> <button onClick="setPercent()">do it</button>
> </td></tr></table>
>
> The goal, is to display the body in step 1, with the code above
> simulating a load for step 2. Running this, you get the status bar
> suddenly displayed at the end, and not incremented (visually) during
> the load of the parse. This same effect happens if the body listed
> above were programatically created at the beginning.- Hide quoted text -
>

You will need to break up your long-running process into stages with
something like this:

<html>
<head>
<script type="text/JavaScript">
var int;
var stage;

function updatePercent(dpt) {
obj = document.getElementById('progbar');
if (obj) obj.style.width = dpt + "%";
}

function showPercent(b) {
obj = document.getElementById('wait');
if (obj) obj.style.display = (b)?'block':'none'
}

function doIt() {
var i, j, tmp;

for (j=0; j<99999; j++) {
tmp=i*j;
}
if (stage == 20) {
showPercent(false);
clearInterval(int)
}
else {
updatePercent(stage * 5);
stage++
}
}

</script>
</head>
<body>
<button onclick="updatePercent(0);showPercent(true);stage = 1;int =
window.setInterval(doIt, 1)">do it</button>
<div id="wait" style="text-align:center;display:none">
<p><b>Searching....<br>Please Wait</b></p>
<div style="width: 200px; height: 10px; border: 2px solid
black; background: #D0D0D0; font-size: 2px;text-align:left;margin:0
auto">
<div id="progbar" style="top: 0px; left: 0px; height:
100%; width: 0; background: blue; font-size: 2px;margin:
0;display:block"></div>
</div>
</div>
</body>
</html>

Otherwise, the screen will not update, the browser will become
unresponsive and your users may see warning messages indicating that
your script is out of control.

On Jul 16, 4:34 pm, David Mark <dmark.cins...@gmail.com> wrote:
> On Jul 16, 3:14 pm, Darcy <darcyka...@gmail.com> wrote:
>
>
>
> > On Jul 16, 2:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > > On Jul 16, 2:48 pm, Darcy <darcyka...@gmail.com> wrote:
>
> > > > I am trying to do the following:
>
> > > > 1. set the contents of div "displayarea" to show a status update bar
> > > > 2. process some data and format the result into HTML (this may take
> > > > time, depending upon the amount of data to process)
> > > > 3. reload the contents of the div "displayarea" with the html
> > > > generated in step 2.
>
> > > > The problem is that the display does not get updated after step 1, so
> > > > I am looking at a blank screen, instead of the status bar. Is there a
> > > > command that I can issue after I set the html in step 1 to flush the
> > > > display changes and force the browser (Firefox and IE) to redraw the
> > > > display while step 2 continues?
>
> > > Post the code.
>
> > An example:
>
> > <script language="JavaScript" type="text/JavaScript">
> > <!--
> > function MM_findObj(n, d) { //v4.01
> > var p,i,x; if(!d) d=document;
> > if((p=n.indexOf("?"))>0&&parent.frames.length) {
> > d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
> > if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
> > x=d.forms[i][n];
> > for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> > x=MM_findObj(n,d.layers[i].document);
> > if(!x && d.getElementById) x=d.getElementById(n); return x;
>
> > }
>
> > var dpt = 0;
>
> > function setPercent()
> > {
> > var i, j, tmp;
> > for (i=0; i<20; i++)
> > {
> > for (j=0; j<999999; j++)
> > {
> > tmp=i*j;
> > }
> > dpt += 5;
> > if (dpt>100)
> > dpt = 0;
> > var obj = MM_findObj('progbar');
> > obj.style.width = dpt+"%";
> > }}
>
> > //-->
> > </script>
>
> > Body:
>
> > <table width="100%" height="100%">
> > <tr><td align="center" valign="center">
> > <p><b>Searching....<br>Please Wait</b></p>
> > <div align="left" style="width: 200px; height: 10px; border: 2px solid
> > black; background: #D0D0D0; font-size: 2px;">
> > <div id="progbar" name="progbar" style="top: 0px; left: 0px; height:
> > 100%; width: 0%; background: blue; font-size: 2px;">&nbsp;</div>
> > </div>
> > <button onClick="setPercent()">do it</button>
> > </td></tr></table>
>
> > The goal, is to display the body in step 1, with the code above
> > simulating a load for step 2. Running this, you get the status bar
> > suddenly displayed at the end, and not incremented (visually) during
> > the load of the parse. This same effect happens if the body listed
> > above were programatically created at the beginning.- Hide quoted text -
>
> You will need to break up your long-running process into stages with
> something like this:
>
> <html>
> <head>
> <script type="text/JavaScript">
> var int;
> var stage;
>
> function updatePercent(dpt) {
> obj = document.getElementById('progbar');
> if (obj) obj.style.width = dpt + "%";
>
> }
>
> function showPercent(b) {
> obj = document.getElementById('wait');
> if (obj) obj.style.display = (b)?'block':'none'
>
> }
>
> function doIt() {
> var i, j, tmp;
>
> for (j=0; j<99999; j++) {
> tmp=i*j;
> }
> if (stage == 20) {
> showPercent(false);
> clearInterval(int)
> }
> else {
> updatePercent(stage * 5);
> stage++
> }
>
> }
>
> </script>
> </head>
> <body>
> <button onclick="updatePercent(0);showPercent(true);stage = 1;int =
> window.setInterval(doIt, 1)">do it</button>
> <div id="wait" style="text-align:center;display:none">
> <p><b>Searching....<br>Please Wait</b></p>
> <div style="width: 200px; height: 10px; border: 2px solid
> black; background: #D0D0D0; font-size: 2px;text-align:left;margin:0
> auto">
> <div id="progbar" style="top: 0px; left: 0px; height:
> 100%; width: 0; background: blue; font-size: 2px;margin:
> 0;display:block"></div>
> </div>
> </div>
> </body>
> </html>
>
> Otherwise, the screen will not update, the browser will become
> unresponsive and your users may see warning messages indicating that
> your script is out of control.

Thanks for the example. I will study it to see how I could integrate
it with my app. The problem that I can see, though, is how to split
up the load into these segments. I have an array of "records", which
I am processing to construct an html to display. I would likely
segment it by "record", but I have to ensure that each call to doIt()
only processes one record, and the records are processed in order they
exist in the array, otherwise the resulting html would not look right.

On Jul 16, 5:08 pm, Darcy <darcyka...@gmail.com> wrote:
> On Jul 16, 4:34 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
>
>
>
>
> > On Jul 16, 3:14 pm, Darcy <darcyka...@gmail.com> wrote:
>
> > > On Jul 16, 2:56 pm, David Mark <dmark.cins...@gmail.com> wrote:
>
> > > > On Jul 16, 2:48 pm, Darcy <darcyka...@gmail.com> wrote:
>
> > > > > I am trying to do the following:
>
> > > > > 1. set the contents of div "displayarea" to show a status update bar
> > > > > 2. process some data and format the result into HTML (this may take
> > > > > time, depending upon the amount of data to process)
> > > > > 3. reload the contents of the div "displayarea" with the html
> > > > > generated in step 2.
>
> > > > > The problem is that the display does not get updated after step 1, so
> > > > > I am looking at a blank screen, instead of the status bar. Is there a
> > > > > command that I can issue after I set the html in step 1 to flush the
> > > > > display changes and force the browser (Firefox and IE) to redraw the
> > > > > display while step 2 continues?
>
> > > > Post the code.
>
> > > An example:
>
> > > <script language="JavaScript" type="text/JavaScript">
> > > <!--
> > > function MM_findObj(n, d) { //v4.01
> > > var p,i,x; if(!d) d=document;
> > > if((p=n.indexOf("?"))>0&&parent.frames.length) {
> > > d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
> > > if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
> > > x=d.forms[i][n];
> > > for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> > > x=MM_findObj(n,d.layers[i].document);
> > > if(!x && d.getElementById) x=d.getElementById(n); return x;
>
> > > }
>
> > > var dpt = 0;
>
> > > function setPercent()
> > > {
> > > var i, j, tmp;
> > > for (i=0; i<20; i++)
> > > {
> > > for (j=0; j<999999; j++)
> > > {
> > > tmp=i*j;
> > > }
> > > dpt += 5;
> > > if (dpt>100)
> > > dpt = 0;
> > > var obj = MM_findObj('progbar');
> > > obj.style.width = dpt+"%";
> > > }}
>
> > > //-->
> > > </script>
>
> > > Body:
>
> > > <table width="100%" height="100%">
> > > <tr><td align="center" valign="center">
> > > <p><b>Searching....<br>Please Wait</b></p>
> > > <div align="left" style="width: 200px; height: 10px; border: 2px solid
> > > black; background: #D0D0D0; font-size: 2px;">
> > > <div id="progbar" name="progbar" style="top: 0px; left: 0px; height:
> > > 100%; width: 0%; background: blue; font-size: 2px;">&nbsp;</div>
> > > </div>
> > > <button onClick="setPercent()">do it</button>
> > > </td></tr></table>
>
> > > The goal, is to display the body in step 1, with the code above
> > > simulating a load for step 2. Running this, you get the status bar
> > > suddenly displayed at the end, and not incremented (visually) during
> > > the load of the parse. This same effect happens if the body listed
> > > above were programatically created at the beginning.- Hide quoted text -
>
> > You will need to break up your long-running process into stages with
> > something like this:
>
> > <html>
> > <head>
> > <script type="text/JavaScript">
> > var int;
> > var stage;
>
> > function updatePercent(dpt) {
> > obj = document.getElementById('progbar');
> > if (obj) obj.style.width = dpt + "%";
>
> > }
>
> > function showPercent(b) {
> > obj = document.getElementById('wait');
> > if (obj) obj.style.display = (b)?'block':'none'
>
> > }
>
> > function doIt() {
> > var i, j, tmp;
>
> > for (j=0; j<99999; j++) {
> > tmp=i*j;
> > }
> > if (stage == 20) {
> > showPercent(false);
> > clearInterval(int)
> > }
> > else {
> > updatePercent(stage * 5);
> > stage++
> > }
>
> > }
>
> > </script>
> > </head>
> > <body>
> > <button onclick="updatePercent(0);showPercent(true);stage = 1;int =
> > window.setInterval(doIt, 1)">do it</button>
> > <div id="wait" style="text-align:center;display:none">
> > <p><b>Searching....<br>Please Wait</b></p>
> > <div style="width: 200px; height: 10px; border: 2px solid
> > black; background: #D0D0D0; font-size: 2px;text-align:left;margin:0
> > auto">
> > <div id="progbar" style="top: 0px; left: 0px; height:
> > 100%; width: 0; background: blue; font-size: 2px;margin:
> > 0;display:block"></div>
> > </div>
> > </div>
> > </body>
> > </html>
>
> > Otherwise, the screen will not update, the browser will become
> > unresponsive and your users may see warning messages indicating that
> > your script is out of control.
>
> Thanks for the example. I will study it to see how I could integrate
> it with my app. The problem that I can see, though, is how to split
> up the load into these segments. I have an array of "records", which
> I am processing to construct an html to display. I would likely
> segment it by "record", but I have to ensure that each call to doIt()
> only processes one record, and the records are processed in order they
> exist in the array, otherwise the resulting html would not look right.- Hide quoted text -

The example uses 20 stages, so adjust for the length of your array and
use the stage counter as the index to retrieve the current record (eg
myarray[stage - 1]). The percentage will be (stage / myarray.length)
* 100.