Help needed to force the display to redraw

D

Darcy

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

David Mark

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

Darcy

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.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.
 
D

David Mark

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.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.
 
D

Darcy

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.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+"%";
}}


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

David Mark

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top