Using PHP & JS to display multiple timer for seperate columns! But displays "EXPIRED EVERYTIME"

Question

I am retrieving a timestamp saved in YYYY:MM:DD HH:MM:SS format from PHP MySQL DB.

And then I want that time to subtract from current time stamp and display in a table to show me that a flight takes off in xyz seconds. Thats what the timer is for.

The table has multiple rows.I have seen various questions but none which answer my problem:

    <?php 
    if (mysqli_num_rows($result)>0)
    {
        while($row=mysqli_fetch_array($result)) {
            ?>
      <tr>
        <td><?php echo $row['flightno']; ?></td>
        <td><?php echo $row['flightdatetime']; ?></td>
        <td><?php echo $row['flightfuel']; ?></td>
        <script>var totaltime= <?php echo json_encode($row['flightdatetime']); ?>; </script>
        <td ><span id="demo"> </span> </td>
        <script>
         for(i=0;i<19;i++)
        {var ttime=totaltime[i];}

// THE PROBLEM IS HERE SOMEWHERE AND I DONT KNOW HOW TO DEAL WITH THE JSON //ABOVE. Converted php array to json to work with javascript of timer.

  var countDownDate = new Date(ttime).getTime();
  var x = setInterval(function() {
      var now = new Date().getTime();

    // Find the distance between now an the count down date

       var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s " ;

    // If the count down is over 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000); </script> 

      </tr>

      <?php
    }
   }    
    ?>
    </tbody>
  </table>
  </div>
</div>

</body>
</html>

You need to narrow it down more than this. We don't need all of your code and you are expected to do some debugging before you post here. You should only post a Minimal, Complete, and Verifiable example. — John Conde
– John Conde, Commented Jan 26, 2017 at 13:15
yes i've been debugging it for the past 3-4 hours .i've shortened the code.as all above is correct and irrelevant .her the php nd js code is included in edit — Razor
– Razor, Commented Jan 26, 2017 at 13:23

mickmackusa · Accepted Answer · 2017-03-15 02:05:12Z

It appears you are using json_encode() to escape your database timestamp string. Is your database value not trustworthy? Okay, you are just being safe. Then you are reconstructing it with a for loop one character at a time. This can't be the leanest way to ensure validity, right?

Anyhow, it looks like your totaltime and ttime are being declared with in your mysql results loop. It also appears that you are running your countDown process just before closing your table.

So is this countDown process called just once or after each declaration of totaltime ttime? If echoing the countDown multiple times then you are not using a very D.R.Y. process. If you are only calling for the countDown one time at the end of your table, then you will only be able to countDown once and that will be on that last declaration of ttime.

My temporary solution is to simply echo your $row['flightdatetime'] into your dom. (this is the part where you can/should tweak the variable storage to a more favorable production-ready technique, but ensure that you are uniquely identifying each timestamp so that the countDown process is applied to all timestamps.

echo "<td><span class="demo" data-val="{$row['flightdatetime']}"></span></td>";

Then ask the javascript to apply a function to all .demo elements.

Again, I wouldn't personally call this snippet production ready, but this will show you one way to get things ticking: (simple draft on jsfiddle and a prod-ready jsfiddle that hides the initial values.)

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".demo").each(function(index){
        var obj=$(this);
        var countDownDate=new Date(obj.data('val')).getTime();
        var x=setInterval(function(obj,countDownDate){
            var now=new Date().getTime();
            var distance=countDownDate-now;
            // If the count down is over 
            if (distance<0){
                clearInterval(x);
                obj.text("EXPIRED");
            }else{
                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                obj.text(days+"d "+hours+"h "+minutes+"m "+seconds+"s ");
            }
        }, 1000,obj,countDownDate);
    });
});
</script>
</head>
<body>
<span class="demo">2017-03-25 02:03:04</span><br>
<span class="demo">2017-03-15 10:57:13</span>

@Razor okay, I didn't earn the green tick for my first draft (I assume because I was showing php's initial timestamp value before the countDown began). I have updated my answer to use data-val to invisibly preserve the values and added the updated jsfiddle. This should earn the green tick, if not please explain what isn't quite right.

Collectives™ on Stack Overflow

Using PHP & JS to display multiple timer for seperate columns! But displays "EXPIRED EVERYTIME"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related