Echoing MySQL Table Data and Making a Countdown Timer for Each Record

[Thauwa]

Hey all!

In the code in question I echo out individual records of data from MySQL successfully. For each record there is a number which is used as a var in the javascript that does the count-down-timer part.

However when I view the resulting page the timer works dynamically only with the first record. With the rest, the timer is static.

 

<?
$result0 = mysql_query("SELECT * FROM table WHERE field='$value'");
while ($riw0 = mysql_fetch_assoc($result0)) {
$seconds1 = $riw0['seconds'] ;
//// echo out data and set variable for the number of seconds to count down
?>

<script language="JavaScript"> 
var countDownInterval=<?=$seconds1?>; 
var c_reloadwidth=200 
</script> 
<ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer> 
<script> 
var countDownTime=countDownInterval+1; 
function countDown(){ 
countDownTime--; 
if (countDownTime <=0){ 
countDownTime=countDownInterval; 
clearTimeout(counter) 
window.location.href="military3.php" //Redirection URL 
return 
} 
var mins = Math.floor(countDownTime/60) 
var secs = countDownTime-(mins*60) 
if (document.all) //if IE 4+ 
document.all.countDownText.innerText = mins+" minutes "+secs+ " "; 
else if (document.getElementById) //else if NS6+ 
document.getElementById("countDownText").innerHTML=mins+" minutes "+secs+ " " 
else if (document.layers){ 
document.c_reload.document.c_reload2.document.write('Soldiers will be ready in... <span id="countDownText">'+countDownTime+' </span> seconds') 
document.c_reload.document.c_reload2.document.close() 
} 
counter=setTimeout("countDown()", 1000); 
} 

function startit(){ 
if (document.all||document.getElementById) 
document.write('Soldiers will be ready in <span id="countDownText">'+countDownTime+' </span> seconds') 
countDown() 
} 

if (document.all||document.getElementById) 
startit() 
else 
window.onload=startit 
</script> 
<? } ?>

 

I tried replacing the javascript vars with PHP echoes for unique variables, but then no timer shows up, even static.

So could anyone advice me on how I could use this code to apply for all MySQL records?

 

Thanks in advance,

Thauwa

 

P.S. If I am unclear with my quandary, do let me know. Thank you.

[batwimp]

As soon as the soonest timer hits zero, it's going to change the entire page to military3.php. I'm assuming that's not the functionality you're looking for.

[batwimp]

My (klunky) way is to use PHP to assign most of the variables in javascript to have unique name so they will operate independently. Keep in mind that to test my code, I had to replace the database implementation with arrays, so when copying it back to your database code, it may not work quite right. But it worked with my test array:

 

<?php
$result0 = mysql_query("SELECT * FROM table WHERE field='$value'");
$varvar = 1;
while ($riw0 = mysql_fetch_assoc($result0)) {
$seconds1 = $value;
//// echo out data and set variable for the number of seconds to count down
?>
<script language="JavaScript"> 
var countDownInterval<?php echo $varvar;?>=<?php echo $seconds1 ?>; 
var c_reloadwidth<?php echo $varvar;?>=200 
</script> 
<ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer> 
<script> 
var countDownTime<?php echo $varvar;?> = (countDownInterval<?php echo $varvar;?>)-0+1; 
function countDown<?php echo $varvar;?>(){ 
countDownTime<?php echo $varvar;?>--; 
if (countDownTime<?php echo $varvar;?> <=0){ 
countDownTime<?php echo $varvar;?>=countDownInterval<?php echo $varvar;?>; 
clearTimeout(counter<?php echo $varvar;?>);
window.location.href="military3.php" //Redirection URL 
return 
} 
var mins = Math.floor(countDownTime<?php echo $varvar;?>/60) 
var secs = countDownTime<?php echo $varvar;?>-(mins*60) 
if (document.all) //if IE 4+ 
document.all.countDownText<?php echo $varvar;?>.innerText = mins+" minutes "+secs+ " "; 
else if (document.getElementById) //else if NS6+ 
document.getElementById("countDownText<?php echo $varvar;?>").innerHTML=mins+" minutes "+secs+ " " 
else if (document.layers){ 
document.c_reload.document.c_reload2.document.write('Soldiers will be ready in... <span id="countDownText<?php echo $varvar;?>">'+countDownTime<?php echo $varvar;?><?php echo $varvar;?>+' </span> seconds') 
document.c_reload.document.c_reload2.document.close() 
} 
counter<?php echo $varvar;?>=setTimeout("countDown<?php echo $varvar;?>()", 1000); 
} 

function startit(){ 
if (document.all||document.getElementById) 
document.write('Soldiers will be ready in <span id="countDownText<?php echo $varvar;?>">'+countDownTime<?php echo $varvar;?>+' </span> seconds') 
countDown<?php echo $varvar;?>() 
} 

if (document.all||document.getElementById) 
startit() 
else 
window.onload=startit 
</script> 
<?php $varvar++; } ?>

 

so, basically I generated a variable called $varvar and set it to 1, then appended that to the name of the variables you had set up in the first iteration of your javascript write-out. on the next iteration, it appended 2 to all the variable (and function) names. now that they are each their own entity, they operate independently. I hope this helps in some way.

[Thauwa]

Your genius did the trick.

Thank you sooo much. 

[batwimp]

There are probably a million ways to make the code more efficient (like just casting the variable into javascript with a single PHP declaration, then just using the javascript variable throughout the code), but JS is not my forte, so work with it till it rocks!

[Thauwa]