Moment js / Jquery ajax countdown timer with mysql

user_12703243 0
Viewed 159

<?php
session_start();
header('Content-Type: application/json');
$start="Start";
$finish="Finish";

$pdo = new PDO("mysql:host=localhost;dbname=test","root","");
$stmt = $pdo->prepare("SELECT DATE_FORMAT(Start,'%Y/%m/%d %H:%i:%s') AS Now, DATE_FORMAT(Finish,'%Y/%m/%d %H:%i:%s') AS endTime FROM xxx WHERE UserEmail ='".$_SESSION['userlogin']."'");
$stmt->execute(array($start));
foreach($stmt->fetchAll() as $row){
 $data[] = $row;


echo json_encode($data);
}

?>

php output:

[{"Now":"2021/06/07 19:42:58","0":"2021/06/07 19:42:58","endTime":"2021/06/08 19:42:58","1":"2021/06/08 19:42:58"}]

Moment.js Method

$.ajax({
    method: "POST",
    url: "timepush.php",
    data: {Now:Now,endTime:endTime},
    datatype: 'JSON'
    success: function(response){ 

        var countDownDate = moment(endTime);    
            
            var x = setInterval(function() {
        diff = countDownDate.diff(moment());
    
        if (diff <= 0) {
          clearInterval(x);
          $('.countdown').text("EXPIRED");
          $(':input[type="submit"]').prop('disabled', false);
        } else
          $('.countdown').text(moment.utc(diff).format("HH:mm:ss"));
          $(':input[type="submit"]').prop('disabled', true);
      }, 1000);
            
            
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
   <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">                                
</div>

<div id="countdown">

Jquery Ajax Method:

$.ajax({
    method: "POST",
    url: "timepush.php",
    data: {Now: Now,endTime: endTime},
    datatype: 'JSON'
    success: function(response){ 

            
            now = (Date.parse(now) / 1000);

            endTime = (Date.parse(endTime) / 1000);
            var timeLeft = endTime - now;

            var days = Math.floor(timeLeft / 86400); 
            var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
            var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
            var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  
            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }

            $("#days").html(days + "<span>:</span>");
            $("#hours").html(hours + "<span>:</span>");
            $("#minutes").html(minutes + "<span>:</span>");
            $("#seconds").html(seconds);        
            
            if(seconds > 0){
            $(':input[type="submit"]').prop('disabled', true);
            }else{
            $(':input[type="submit"]').prop('disabled', false);
            }
    }
});


    setInterval(function() { response(); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
   <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">
</div>

<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>

I have pushed mysql datetime in json format and changed (-) into (/), but i can't run on countdown timer. I tried moment.js and jquery ajax method but it doesn't appear something. what am i do wrong? Moment js or Jquery ajax it doesn't matter.

countdown momentjs mysql jquery ajax
1 Answers

The problem is the wrong use of jquery for get the dom of the counter div (<div id="countdown">, you forget the end tag </div> too).

You must use the hashtag instead dot in query selector, like that $('#countdown').text('something'); and not $('.countdown').text('something');

const endTime = moment().add(15, 'seconds'); // Just for try
const countDownDate = moment(endTime);

const interval = setInterval(function() {
  diff = countDownDate.diff(moment());

  if (moment().isSameOrAfter(countDownDate)) {
    clearInterval(interval);
    $('#countdown').text("EXPIRED");
    $(':input[type="submit"]').prop('disabled', false);
  } else
    $('#countdown').text(moment.utc(diff).format("HH:mm:ss"));
  $(':input[type="submit"]').prop('disabled', true);

}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
  <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">
</div>

<div id="countdown"></div>

user_78231520
Related