Penny Auction Timer Update after Database fetch

Question

So i am implementing this feature in a penny auction website. Using countdown.js as the library to run a countdown. the countdown works in a way that:

<div class="countdown cf content_item-countdown" style="width: 100%;" data-countdown="<?php echo date('M d, Y H:i:s O', strtotime($item['end_date']));?>"></div>

the end_date here, is from database, it is the date on which the timer will stop (and bidding will end)

the countdown function:

$('.countdown').each(function(){
            var count = $(this), time = $(this).data('countdown'), format = $(this).data('format');
            var Otime = new Date(time), o = {
                serverSync: serverTime,
                until:Otime,
                // demo data set to reset timer, when it's finished
                // change zeroCallback to prefered callback
                zeroCallback: function(options) {

                }
            };
            if(format){
                $.extend(o,{format:format});
            }else{
                $.extend(o,{layout: '{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}'});
            }
            $(this).countdown(o);
        });

now i am supposed to implement another feature, if the end_time <15 seconds (means the time remaining to bid is less than 15 seconds), and some one places a bid, the timer should automatically reset to 15 seconds, and so on. like: http://www.quibids.com/en/ i do this by updating the end_date to a certain seconds. and updating timer:

 $(time_update).html( '<div class="countdown cf content_item-countdown" style="width: 100%;" data-countdown="">'+data[$i].end_date+'</div>');

i assumed since the countdown timer is getting end_date it should automatically reset it. But it doesn't, instead it prints the end date and reverts back to the old countdown. the timer updates fine whenever i REFRESH the page, but i want it to refresh on the go, i assume it requires an AJAX call, any help?

Answer 1

the best way was to destroy the countdown widget and then display it using the updated end_date from database