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');

Looks like something that's fancy that isn't getting you anywhere. — Darryl Hein, Mar 27 '09 at 07:13

score 1 · Accepted Answer · edited Mar 27 '09 at 07:37

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();
}

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

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

How countdown get Synchronise with jquery using "jquery.countdown.js" plugin?

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

edited May 23 '17 at 12:30

Community

1
1

answered Apr 10 '10 at 11:41

Basant B. Pandey

345
7
22

why don't you use my solution? – roman m Apr 10 '10 at 18:14

Darryl Hein · Answer 3 · 2009-03-27T07:13:38.617

0

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);
     });
 }

edited Mar 27 '09 at 07:13

answered Mar 27 '09 at 06:57

Darryl Hein

142,451
95
218
261

i don't care about the timer functionality, plugin does all that, i just need to know how to make sure it only has ONE INSTANCE running – roman m Mar 27 '09 at 06:59
i reworded the question, i guess it was a bit confusing – roman m Mar 27 '09 at 07:00

jQuery Countdown plugin and AJAX

EDIT

3 Answers3