Countdown with callback with jQuery - ajax

Question

I use Rendro countdown (http://github.com/rendro/countdown/)
$('.countdown.callback').countdown({
date: +(new Date) + 10000,
render: function(data) {
$(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
},
onEnd: function() {
$(this.el).addClass('ended');
}
}).on("click", function() {
$(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
});
Styled output
<div class="countdown styled"></div>
<h2>Countdown with callback</h2>
<p>Click on the green box to reset the counter to 10 sec.</p>
<div class="countdown callback"></div>
How to automatically reset the counter (without click) back to 10 after countdown = 0 ?
I tried insert onclick function into onEnd but doesn't works.

Answer 1

Try resetting the date option and calling the start([refreshRate]) method in the onEnd function after you do your addClass.
this should restart the countdown.
something like this:
$('.countdown.callback').countdown({
date: +(new Date) + 10000,
render: function(data) {
$(this.el).text(this.leadingZeros(data.sec, 2) + " sec");
},
onEnd: function() {
$(this.el).addClass('ended');
this.update(+(new Date) + 10000);
this.start(1000);
}
}).on("click", function() {
$(this).removeClass('ended').data('countdown').update(+(new Date) + 10000).start();
});
see a fiddle here: http://jsfiddle.net/MaurizioPiccini/xDy5d/