Member Avatar for Keased

HI i would be more than thankful if anybody can tell me why this don't work,
the problem is that the JS counter won't work when there are more then 1 entrys in mysql.
With one entry the script runs fine.
Heres the code:

<table>
<?
//Connect to mysql server
	$link = mysql_connect("database connect works","...","...");
	if(!$link) {
		die('Failed to connect to server: ' . mysql_error());
	}
	//Select database
	$db = mysql_select_db("niisama");
	if(!$db) {
		die("Unable to select database");
	}
$asjad = mysql_query("SELECT aegs,aegm,aegh,aegp,aegk,aega FROM tehingud;");
	if (mysql_num_rows($asjad) == 0) break;
		while ($asi = mysql_fetch_array($asjad))
		{?>
		<table width="200" border="0">
  <tr>
   <tr>
    <th scope="row">Aega Jäänud</th>
    <td>
    
    
	<form name="counter"><input type="text" size="8" 
name="d2"></form> <script> 
<!-- 
// 
		
<?
	$aegs=60-date("s" ,time());
	$aegm=$asi[aegm]-date("i" ,time())-1;
	$pkuus=$asi[aegp]-date("d" ,time());
	if($pkuus<0)
	{
	$pkuus=date("t" ,time())-date("d" ,time())+$asi[aegp];
	}
	
	$aegh=$pkuus*24+$asi[aegh]-date("H" ,time());
	if($aegm<0)
	{
	$aegh-=1;
	$aegm=60+$aegm;
	}
	$aegp=$asi[aegm];
	$aegk=$asi[aegm];
	$aega=$asi[aegm];
	?>
 var milisec=0;
 var seconds= <?=$aegs?>; 
 var minutes= <?=$aegm?>;
 var hours= <?=$aegh?>;
 document.counter.d2.value='30' 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    seconds=59 
    minutes-=1 
 } 
  if (minutes<=-1){ 
    minutes=59 
    hours-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1;
    document.counter.d2.value=hours+":"+minutes+":"+seconds;
    setTimeout("display()",100) 
} 
display() 
--> 
</script> </td>
</td>
  </tr>
</table>
<br />
<?
}
?>
</table>
  • 4 Contributors
  • 5 Replies
  • 90 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Dani AI

Generated

Two separate problems are visible in the thread: the script is being generated inside the PHP loop (so you end up with duplicated globals and inputs), and each counter is not given its own source of timing data in a safe way. As and noted, move the JavaScript out of the loop and render only the data for each row from PHP; then let a single JS routine turn those data points into live timers.

Recommended approach (server -> HTML -> single JS updater)

  • On the server compute a simple numeric value per row: either the absolute UNIX timestamp for the target moment or the number of seconds remaining at page render time. Embed that in each row as a data attribute (example below).
  • Put one script on the page (outside the PHP loop) that finds all rows, reads their data attributes, and updates the visible counter for each row on a regular tick. This avoids duplicated function definitions, name collisions and the problem of multiple inputs with the same name.

Example patterns (keeps things simple and robust):

HTML snippet for each row (generated by PHP):

<tr class="deal" data-target="<?php echo $target_unix; ?>">
  <td class="time-left">--:--:--</td>
</tr>

Single-page JS updater:

document.addEventListener('DOMContentLoaded', function(){
  var rows = document.querySelectorAll('.deal');
  function pad(n){ return n<10 ? '0'+n : ''+n; }
  function updateAll(){
    var now = Math.floor(Date.now()/1000);
    rows.forEach(function(r){
      var target = parseInt(r.getAttribute('data-target'),10) || now;
      var rem = Math.max(0, target - now);
      var h = Math.floor(rem/3600), m = Math.floor((rem%3600)/60), s = rem%60;
      r.querySelector('.time-left').textContent = pad(h)+':'+pad(m)+':'+pad(s);
    });
  }
  updateAll(); setInterval(updateAll, 1000);
});

Troubleshooting tips

  • Use View Source (as suggested) to confirm each row has the right data attribute and that you do not have duplicate element names.
  • Do not rely on named forms/inputs for multiple rows; use classes/IDs or data attributes.
  • If client clocks vary, prefer outputting "seconds remaining" from the server rather than using client-only timestamps.
  • For many rows, a single setInterval is much cheaper than creating one per-row.

Recommended Answers

All 5 Replies

Member Avatar for nav33n

var seconds= <?=$aegs?>;

Try with double quotes around.
ie., var seconds= "<?=$aegs?>"; Do the same with the rest of javascript variables.

Member Avatar for digital-ether

You have the javascript within the PHP loop.

You need to take it out so that it loads only once.

Member Avatar for Keased

Hm upper quotes didn't work,
i'm not getting the second idea pretty well,
how am i supposed to take the script out and doesent it only load 1 counter then?

Member Avatar for Keased

No one?

Member Avatar for ~s.o.s~

A solution has already been suggested to you. Move the dynamically generated Javascript out of the looping construct. To understand more, take a look at the generated source code by navigating to 'View' -> 'View Source' in Firefox.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.