Question

I’ve got a fairly simple timer which I set on one page and then view the countdown on another page.

The problem is that timer updates the first time but not again (unless I do a full page refresh which works but I want to avoid).
I don’t have any errors in firebug.
The function resends the ajax command every 25 seconds – this works, I see the times coming through as expected.
If I change the time I can see the results back from the php page as expected however the timer itself doesn’t update without an actual page refresh.
I don’t have any interaction with this page (its just a timer) so I can’t update on click.

Any ideas what I’m missing? I know it must be obvious.

$(document).ready(function(){
suitcase();
});
setInterval(suitcase, 25000);

function suitcase() {
$.ajax({
    type: 'POST',
    url: 'timeRTN.php',
    async: false,
    cache: false,
    data: {            
        examlength: examlength
    },
    success: function(examlength) {
        $('#pauseResume').countdown({
            until: examlength,
            format: 'HMS'
        })
      },
     })
    };

HTML:

<div id="pauseResume" class="countdown"></div>

Thanks

Answer 1

Try this:

function Suitcase(){
var countdownExists = false;
...
  success: function(examlength) {
    if(!countdownExists){
      $('#pauseResume').countdown({
        until: examlength,
        format: 'HMS'
      })
      countdownExists = true;
    }else{
      $('#pauseResume').countdown('option',{
        until: examlength,
        format: 'HMS'
    })

Documentation here:
http://keith-wood.name/countdownRef.html

$().countdown(options) creates a new instance of a countdown

$().countdown('option', options) sets the options of an existing instance.