Click here to Skip to main content
13,629,209 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I am currently stuck on a problem and not sure how to solve it. I am new to php and javascript coding so do please correct me if there is an easier way to do this.

My problem is that I am trying to get a countdown timer working for multiple data in mysql database. I have already made a successful countdown time function that only works with one data using the if statement in php, but when I try to do it with multiple data using the while statement in php it doesn't work.here is my php code.

//TODAY'S DATE
$today = time();

//FETCHES DATE AND TIME FOR THE EVENT FROM DATABASE
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);

while ($row = mysqli_fetch_assoc($result)) {
    $title = $row['title'];
    $cname = $row['cname'];
    $team = $row['team'];
    $description = $row['description'];
    $endtime = $row['endtime'];

    echo "<tr>";
    echo "<td width='16%'>Title:</td>";
    echo "<td width='16%'>$title</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Client name:</td>";
    echo "<td width='16%'>$cname</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Team:</td>";
    echo "<td width='16%'>$team</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>Description:</td>";
    echo "<td width='16%'>$description</td>";
    echo "</tr><tr>";
    echo "<td width='16%'>End time:</td>";
    echo "<td width='16%'>$endtime</td>";
    echo "</tr><tr>";
    echo"</BR>";
    echo"</BR>";
}

$conn->close();


below is my javascript that suppose to run the count down


var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();

var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;

function pad(n) {
   // utility function to pad a number to 2 digits:
   return ('0' + n).substr(-2); 
}

function timer() {
    var todaySeconds = Math.floor(new Date().getTime() / 1000);
    // collect the html first in an array
    var html = [];
    // keep track whether there are still counters not yet zero:
    var allDone = true;
    // go through the list of dates:
    endDatesInSeconds.forEach(function (endDateSeconds) {
        var totalSeconds = endDateSeconds - todaySeconds;
        var days        = Math.floor(totalSeconds/24/60/60);
        var seconds     = Math.floor(totalSeconds - days*86400);
        var hours       = Math.floor(seconds/3600);
        seconds         = Math.floor(seconds - hours*3600);
        var minutes     = Math.floor(seconds/60);
        seconds         = seconds % 60;
        // add a part of html
        html.push(
            totalSeconds <= 0 
               ? 'project time Completed'
               : days + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds));
        // when at least one counter is not complete, we are not done:
        allDone = allDone && totalSeconds <= 0;
    });
    // now put the html in the document:
    document.getElementById('countdown').innerHTML = html.join('<br/>');
    if (allDone) {
        clearInterval(countdownTimer);
    }
}

var countdownTimer = setInterval('timer()', 1000);
<script>
the javascript run the countdown by getting it value from the php (var _DateFromDBProgEndDate = '<?php echo $endtime; ??>';)
Posted 8-Dec-15 10:29am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

I don't see where the 'endDatesInSeconds' array is loaded or initialized ...
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web02-2016 | 2.8.180712.1 | Last Updated 8 Dec 2015
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100