Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Help needed to force the display to redraw

Reply
Thread Tools

Help needed to force the display to redraw

 
 
Darcy
Guest
Posts: n/a
 
      07-16-2007
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?

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 2:48 pm, Darcy <(E-Mail Removed)> 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.

 
Reply With Quote
 
 
 
 
Darcy
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 2:56 pm, David Mark <(E-Mail Removed)> wrote:
> On Jul 16, 2:48 pm, Darcy <(E-Mail Removed)> 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.

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 3:14 pm, Darcy <(E-Mail Removed)> wrote:
> On Jul 16, 2:56 pm, David Mark <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jul 16, 2:48 pm, Darcy <(E-Mail Removed)> 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.

 
Reply With Quote
 
Darcy
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 4:34 pm, David Mark <(E-Mail Removed)> wrote:
> On Jul 16, 3:14 pm, Darcy <(E-Mail Removed)> wrote:
>
>
>
> > On Jul 16, 2:56 pm, David Mark <(E-Mail Removed)> wrote:

>
> > > On Jul 16, 2:48 pm, Darcy <(E-Mail Removed)> 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.

 
Reply With Quote
 
David Mark
Guest
Posts: n/a
 
      07-16-2007
On Jul 16, 5:08 pm, Darcy <(E-Mail Removed)> wrote:
> On Jul 16, 4:34 pm, David Mark <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jul 16, 3:14 pm, Darcy <(E-Mail Removed)> wrote:

>
> > > On Jul 16, 2:56 pm, David Mark <(E-Mail Removed)> wrote:

>
> > > > On Jul 16, 2:48 pm, Darcy <(E-Mail Removed)> 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.

 
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
Nike air force one, air force 1, air force one low cut, air force one abdul_razak@indiatimes.com Digital Photography 2 12-31-2008 04:29 PM
force redraw of a row in jtable... 6e Java 0 08-04-2005 02:00 PM
force redraw of a row in jtable... 6e Java 0 08-04-2005 01:59 PM
How to force a Web XML control to redraw/repaint? ~~~ .NET Ed ~~~ ASP .Net Building Controls 0 03-19-2005 02:05 PM
can't force redraw of my frame Maik Wiege C++ 2 01-23-2004 03:28 AM



Advertisments