Help needed to force the display to redraw

Discussion in 'Javascript' started by Darcy, Jul 16, 2007.

  1. Darcy

    Darcy Guest

    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?
    Darcy, Jul 16, 2007
    #1
    1. Advertising

  2. Darcy

    David Mark Guest

    On Jul 16, 2:48 pm, Darcy <> 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.
    David Mark, Jul 16, 2007
    #2
    1. Advertising

  3. Darcy

    Darcy Guest

    On Jul 16, 2:56 pm, David Mark <> wrote:
    > On Jul 16, 2:48 pm, Darcy <> 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[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.
    Darcy, Jul 16, 2007
    #3
  4. Darcy

    David Mark Guest

    On Jul 16, 3:14 pm, Darcy <> wrote:
    > On Jul 16, 2:56 pm, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Jul 16, 2:48 pm, Darcy <> 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[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.
    David Mark, Jul 16, 2007
    #4
  5. Darcy

    Darcy Guest

    On Jul 16, 4:34 pm, David Mark <> wrote:
    > On Jul 16, 3:14 pm, Darcy <> wrote:
    >
    >
    >
    > > On Jul 16, 2:56 pm, David Mark <> wrote:

    >
    > > > On Jul 16, 2:48 pm, Darcy <> 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[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.
    Darcy, Jul 16, 2007
    #5
  6. Darcy

    David Mark Guest

    On Jul 16, 5:08 pm, Darcy <> wrote:
    > On Jul 16, 4:34 pm, David Mark <> wrote:
    >
    >
    >
    >
    >
    > > On Jul 16, 3:14 pm, Darcy <> wrote:

    >
    > > > On Jul 16, 2:56 pm, David Mark <> wrote:

    >
    > > > > On Jul 16, 2:48 pm, Darcy <> 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[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.
    David Mark, Jul 16, 2007
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. 6e
    Replies:
    0
    Views:
    545
  2. 6e
    Replies:
    0
    Views:
    1,991
  3. Maik Wiege

    can't force redraw of my frame

    Maik Wiege, Jan 19, 2004, in forum: C++
    Replies:
    2
    Views:
    486
    Jorge Rivera
    Jan 23, 2004
  4. ~~~ .NET Ed ~~~

    How to force a Web XML control to redraw/repaint?

    ~~~ .NET Ed ~~~, Mar 19, 2005, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    147
    ~~~ .NET Ed ~~~
    Mar 19, 2005
  5. Force an FX redraw

    , Feb 19, 2005, in forum: Ruby
    Replies:
    6
    Views:
    113
    ritchie
    Feb 20, 2005
Loading...

Share This Page