display js inside php while loop

Question

I found the count down script in http://www.dynamicdrive.com/dynamicindex6/dhtmlcount.htm

It works fine if i just define the date but when I try to pass the date from this php/mysql query into the js file, it works only for the first record and not after that.

<script type="text/javascript" src ="time.js"></script>//this is the script from the above link. this directly gets todays date inside this code

<?php
$result = mysql_query("SELECT * FROM my_table LIMIT 10") or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
$id = $row['id'];
$title = $row['title'];
$date = date("F d, Y", strtotime($row['date']));

 echo '<tr><td>';
 echo $title;
 echo "</td><td>";
 echo $id;
 echo "</td><td>";
 echo $date; //display the date directly from the table as June 25, 2010
 echo "</td><td>";
 ?>
    <!-- this js code and the div is to show the countdown from today like 3D 2H 5M 45-->
 <div id="container"></div>
 <script type="text/javascript">
  var futuredate=new cdtime("container", "<?php echo $date ;?>")
  futuredate.displaycountdown("days", formatresults)
 </script>
 <?php

 echo "</td></tr>"; 
 }

} 
?>

I tried wrapping the js code as php by using echo but it doesnt show anything(not even the output for first record). The above code clearly does what it has to do because I closed that php and opened the js so that's why its not looping. but I am guessing there should be away.

Please help me out.

Answer 1

Each one of your divs needs to have a unique id. You are also going to run into issues because you are redefining futuredate over and over.

Something like the below should work because each div gets its own id, (container1, container2, container3, etc.) and you are creating a new variable with a different name for each instance of cdtime (futuredate1, futuredate2, futuredate3, etc.). This would not necessarily be my favorite method for doing this, as using something like jQuery's .each() syntax would probably be better (or whatever js framework you choose) rather than defining a bunch of new variables.

I have not tested this code, but this should work:

<script type="text/javascript" src ="time.js"></script>//this is the script from the above link. this directly gets todays date inside this code

<?php
$result = mysql_query("SELECT * FROM my_table LIMIT 10") or die(mysql_error());
while($row = mysql_fetch_array( $result )) {
  $id = $row['id'];
  $title = $row['title'];
  $date = date("F d, Y", strtotime($row['date']));

  echo '<tr><td>';
  echo $title;
  echo "</td><td>";
  echo $id;
  echo "</td><td>";
  echo $date; //display the date directly from the table as June 25, 2010
  echo "</td><td>";
?>
    <!-- this js code and the div is to show the countdown from today like 3D 2H 5M 45-->
 <div id="container<?=$id?>"></div>
 <script type="text/javascript">
  var futuredate<?=$id?>=new cdtime("container<?=$id?>", "<?= $date?>")
  futuredate<?=$id?>.displaycountdown("days", formatresults)
 </script>
<?php

 echo "</td></tr>"; 
 }

} 
?>

In regard to your question in the comments about jQuery, you could do something similar to:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#container<?=$id?>').countdown({until: new Date(YYYY, MM, DD), format: 'D'});
    });
</script>

Note that this is using this plugin, but there are others out there, and you would need to replace the YYYY, MM, DD values with their appropriate values.