jQuery Countdown plugin and AJAX

Question

I'm using jQuery Countdown plugin to implement a Countdown and call a webservice when timer expires.

The problem is that I'm using AJAX on the page, and have to re-setup the Countdown on every AJAX request like so:

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(SetupTimer);

/*Initial setup*/
$(document).ready(function() {
    SetupTimer();
});

function SetupTimer() {
        var serverTime = new Date();
        var cutoffTime = new Date($("#<%= cutoffTime.ClientID %>").val());
        serverTime.setHours(serverTime.getHours());
        if (serverTime < cutoffTime) {
            $('#timer').countdown('destroy'); /*should work, but doesn't*/
            $('#timer').countdown({ until: cutoffTime, serverTime: serverTime, onExpiry: OrderingEnded, format: 'yowdHMS' });
        } 
        else
            OrderingEnded();
    }

This, for some reason, creates a new instance of the Countdown on ever request, resulting in numerous calls to Webservice when Countdown expires.

How do I make sure that only one instance of the Countdown exists at a time?

EDIT

found this in documentation, doesn't do it for me though

        $('#timer').countdown('destroy');

Answer 1

You probably want setInterval(). It allows you to repeat the timer every X milliseconds. You can use clearInterval() to stop it.

Here is some reading comparing setInterval() and setTimeout().

Another option to only recreate the timer in the callback function of the AJAX call. This will ensure a new timer is only started once the previous AJAX call is complete, such as:

 function CheckServer() {
     $.get('/get_something.html', function() {
         timer = setTimeout('CheckServer', 5000);
     });
 }

Answer 2

ok, figured it out, just needed to call the

$('#timer').countdown('destroy');

on beginRequest

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(DeleteTimer);
prm.add_endRequest(SetupTimer);

$(document).ready(function() {
    SetupTimer();
});


function DeleteTimer() {
    $('#timer').countdown('destroy');
}
function SetupTimer() {
    var serverTime = new Date();
    var cutoffTime = new Date($("#<%= cutoffTime.ClientID %>").val());
    serverTime.setHours(serverTime.getHours());
    if (serverTime < cutoffTime) {          
        $('#timer').countdown({ until: cutoffTime, serverTime: serverTime, onExpiry: OrderingEnded, format: 'yowdHMS' });
    } 
    else
        OrderingEnded();
}

Answer 3

Hello, I just looked at this plugin and noticed I can't seem to get a leading 0 where there are single digits. For example 01:02:03 will only display as 1:2:3

Any suggestions?

Thanks

Answer 4

hi,

I have a similar type of problem. I am using web services to get the current time from the server using serversync function in jquery.countdown.js plugin. I have a facing a problem

http://stackoverflow.com/questions/2609028/how-countdown-get-synchronise-with-jquery-using-jquery-countdown-js-plugin

will you please find the solution and let me know thanks.