How to dynamically change a row in a table without a redraw?

ppepin · Jul 15, 2002

I hope I can explain what I am trying to do so that everyone can understand.

I have a table with 20 rows in it. All of which contain no data at this point. I then want to run a script which will populate the first row with something like "Processing application #1". If my processing succeeds, then I want to replace that row with "Processing application #2" and so forth. The catch is if that the processing should fail, I want to leave it up on the screen with an error and the above process will happen using the second row.

The problem is that I want to do this without having to submit the page over and over again.

Below is an example of what should be seen on the screen.

Processing Application #1 - Error
Processing Application #9 - Error
Processing Application #10 ...

The processing Application #10 line will increment to 11, 12, 13 until an error is reached or we complete everything.

I have coded this several ways putting a sleep loop to make sure that the lines are not scrolling too fast for the user to see and also tried using a setTimeout. But all that happens is I never see any lines "Processing application #?" until I reach the end. Then I see the last one.

If I put any kind of intervention in, like an alert in the middle, I will see each row display. If I don't put in an alert, I will only see the last one.

Is there a way to force the redraw without any intervention?

Here is an example of what I am doing:

<html>

<body>

<form name="application_list">
<table>
<tr>
<td><input type="text" name="app_descr1"></td>
</tr>
</table>
</form>

<script language='javascript'>
function putDescription( ) {
for (var i=1;i=30;i++) {
document.application_list.app_descr1.value = "Processing Application #" + i;
sleep(5000);
}
}

putDescription();

</script>

</body>

</html>

The above example uses another function sleep to pause for 5 seconds. This should give the user ample time to read what is on the screen.

You would think the above example would display the line in the table, pause for 5 seconds, and then display the next one on the same line right? Wrong!

The only thing that shows up is "Processing Application #30".

Can someone help?

jemminger · Jul 15, 2002

here's one way - make the table row text updating a separate function, and make the loop counter global:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html>
<head>
<title></title>
<meta name=&quot;Author&quot; content=&quot;&quot;>
<meta name=&quot;Keywords&quot; content=&quot;&quot;>
<meta name=&quot;Description&quot; content=&quot;&quot;>

<script language=&quot;javascript&quot;>
var count = 1;

function updateRow(iRow) {
  document.application_list.app_descr1.value = &quot;Processing Application #&quot; + iRow;

}

function doLoop( ) {
  if (count<=30) {
    updateRow(count);
    count++;
    window.setTimeout(&quot;doLoop();&quot;,500);
  }
}

</script>

<style type=&quot;text/css&quot;>
</style>
</head>

<body onLoad=&quot;&quot;>
<form name=&quot;application_list&quot;>
<input type=&quot;text&quot; name=&quot;app_descr1&quot; value=&quot;&quot; size=&quot;30&quot; />
<input type=&quot;button&quot; name=&quot;&quot; value=&quot;doLoop();&quot; onclick=&quot;doLoop();&quot; />
</form>
</body>
</html>

======================================

if (!succeed) try();
-jeff

ppepin · Jul 15, 2002

Here are 2 html pages to try out to see what this is doing:

This one pauses for 1 second in between and goes to 30. Nothing will be displayed at the end except Processing Application #30.

<html>

<head>
</head>

<body>

<form name="application_list">
<table>
<tr>
<td><input type="text" name="app_descr1" value="abc" size="30"></td>
</tr>
</table>
</form>

<script language='javascript'>
function putDescription( ) {
for (i=1;i<31;i++) {
document.application_list.app_descr1.value = "Processing Application #" + i;
sleep(1000);
}
}

function sleep(num)
{
var f = new Date();
f = new Number(f);
f = f + num;
while(true)
{
var n = new Date()
n = new Number

;
if(n >= f)
{
break;
}
}
}

putDescription();

</script>

</body>

</html>

This one is the same, the only difference is the alert after the sleep. This causes control to return to the browser and you will now see each one displayed just like I need, but can't have the user clicking ok 20 or 30 times!

<html>

<head>
</head>

<body>

<form name="application_list">
<table>
<tr>
<td><input type="text" name="app_descr1" value="abc" size="30"></td>
</tr>
</table>
</form>

<script language='javascript'>
function putDescription( ) {
for (i=1;i<31;i++) {
document.application_list.app_descr1.value = "Processing Application #" + i;
sleep(1000);
alert(i);
}
}

function sleep(num)
{
var f = new Date();
f = new Number(f);
f = f + num;
while(true)
{
var n = new Date()
n = new Number

;
if(n >= f)
{
break;
}
}
}

putDescription();

</script>

</body>

</html>

Please help me!

ppepin · Jul 15, 2002

Jeff,

Your my hero!

I've been busting my @#$ for 2 days on this. I really appreciate your help. It worked fine!

Can you tell me why this worked and the way I coded it didn't?

Thanks.

jemminger · Jul 15, 2002

I'm not real sure about the sleep() function...I've tried creating timers like that without success. I think javascript just runs through each call to it at full speed since putDescription() isn't waiting for a return value from sleep().

keep in mind with loops like this, the browser will more or less cache all results until the loop is done, unless you break out specific parts...this is why you don't see the screen repainted until the end. what a nightmare game programming must be...

ta!

======================================

if (!succeed) try();
-jeff

ppepin · Jul 16, 2002

Thanks for your help and explanation. It makes sense.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to dynamically change a row in a table without a redraw?

ppepin

IS-IT--Management

jemminger

Programmer

ppepin

IS-IT--Management

ppepin

IS-IT--Management

jemminger

Programmer

ppepin

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor