How to display multiple Countdown timer in php

Question

Firtly, i select all data time from database, but when show to the page only the first one items will show the timer, other items cannot to show the timer.

 <?php
     $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
                    $stmtAuction->execute();
     if ($stmtAuction->rowCount() > 0) {
                        while ($item = $stmtAuction->fetch()) {
       ?>
          <span id='countdown' value='<?php echo $item['expired_at'];?>'></span>       

<?php
}
?>
    <script>

     $("#countdown").countdown($('#countdown').attr('value'), function(event) {
                $(this).text(
                    event.strftime('%D days %H:%M:%S')
                );
            });
    </script>

how can i show timer for every items??

Well you have $stmtAuction->rowCount() number of id='countdown'. ids are supposed to be unique. So javascript/jQuery will only find the 1st/unique id='countdown'. You need to use class='countdown', and $(".countdown"), although you will need to make some additional changes to make this work. — Sean
– Sean, Commented Jan 5, 2016 at 3:10
Have added an answer that shows changing from id to class, as well as how to use $(".countdown") and $.each() to display each timer data. — Sean
– Sean, Commented Jan 5, 2016 at 3:36

Sean · Accepted Answer · 2016-01-05 03:34:59Z

2

Your issue is caused by un-unique ids. You have $stmtAuction->rowCount() number of id='countdown'. ids are supposed to be unique. So javascript/jQuery will only find the 1st/unique id='countdown'. You need to use class='countdown' instead -

<?php
    $stmtAuction = $db->prepare("SELECT * FROM auction WHERE expired_at >= CURDATE() AND status = 'available' ORDER BY expired_at ASC");
    $stmtAuction->execute();
    if ($stmtAuction->rowCount() > 0) {
        while ($item = $stmtAuction->fetch()) {
        ?>
            <span class='countdown' value='<?php echo $item['expired_at'];?>'></span>
                  ^^^^^-change from id to class
<?php
        }
    }
    ?>

Now in your javascript, you need to use the class selector - $(".countdown") - and loop over each class using $.each().

<script>
    $('.countdown').each(function(){
        $(this).countdown($(this).attr('value'), function(event) {
            $(this).text(
                event.strftime('%D days %H:%M:%S')
            );
        });
    });
</script>

a jsFiddle example - https://jsfiddle.net/smh5nhgz/1/

answered Jan 5, 2016 at 3:34

Sean

12.4k3 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ch Hong Over a year ago

hi sean , why when i put today date for example , value='2016/01/05 05:00:00' , then the countdown become 00 days 00:00:00...how to fix it?

Collectives™ on Stack Overflow

How to display multiple Countdown timer in php

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