Count up timer using ajax, javascript for a specific div

Question

Somewhat of a 2 part question:

How would I implement some javascript in here that calls the #refresh to allow a count up timer in text form, let's say starting at 0 seconds that runs up to 3 minutes which then refreshes and starts back at zero - which refreshes a specific div that the id is in?

$(document).ready(function () {
    var interval = 180000; // set for 3 minutes
    var refresh = function() {
        $.ajax({
            url: "servers.php",
            cache: false,
            success: function(html) {
                $('#refresh').html(html);
                setTimeout(function() {
                    refresh();
                }, interval);
            }
        });
    };
    refresh();
});

<div id="refresh"><p>Last Scanned: ???</p></div>

Also, I'm still fairly new to AJAX, so if the above code is out of whack or incorrect, please let me know and also where I went wrong...

Sorry I answered but then realized that I misread both the question and the code, deleted my answer. — tomca32, Oct 18 '13 at 02:22
whats not working here? I'm not entirely clear what you're trying to achieve. ...You are getting html from the server every 3 mins... well that looks like it should work. — Bosworth99, Oct 18 '13 at 02:23
I'm also trying to add a count up timer to it - using only minutes and seconds that literally displays the timer counting up in text form — user2732875, Oct 18 '13 at 02:24
Oh, I understand. You need to update an element with a formatted conversion of your ms count, start it on refresh. Here is some math http://stackoverflow.com/questions/8211744/convert-milliseconds-or-seconds-into-human-readable-form/8211872#8211872 — Bosworth99, Oct 18 '13 at 02:28

score 2 · Accepted Answer · edited Oct 18 '13 at 03:36

2

OK so this is the whole counter with formatting, without AJAX:

$( document ).ready( function(){
   setTime(180001); // set for 3 minute interval scans
});

function setTime(interval){
    setTimeout(startCounter(interval, 0),interval);
}
function startCounter(target, current) {
    var mins, secs;
    if (current >=60) {
        mins = Math.floor(current/60);
        secs = current - (mins*60);
        $('#refresh p').html('Last Scanned: '+ mins + 'm ' + secs + 's ago');
    }else $('#refresh p').html('Last Scanned: '+ current + 's ago');
  if (current >= target/1000) {
    setTime(180001);
    return;
  }
  setTimeout(function(){startCounter(target, current+1);}, 1000);
}

jsFiddle example: http://jsfiddle.net/vcLhy/7/

edited Oct 18 '13 at 03:36

user2732875

269
5
15

answered Oct 18 '13 at 02:17

tomca32

1,120
6
9

That is very close, however, is there a way to make it restart back at 0 after hitting 3 minutes? – user2732875 Oct 18 '13 at 02:32
The refresh function will restart it to zero automatically after it gets AJAX response – tomca32 Oct 18 '13 at 02:33
Could you provide a bit more feedback? Do you get an error, did you check your AJAX response (just console.log(html);) or is the counter not refreshing or...? – tomca32 Oct 18 '13 at 02:40
Umm yeah, I meant that success part goes into your $ajax function...hold on let me edit – tomca32 Oct 18 '13 at 02:53
Well the jsfiddle doesn't help too much there...it's trying to fire an ajax request to 'servers.php' of course it doesn't work. I think you should post your PHP code, let's see what's there. – tomca32 Oct 18 '13 at 03:02
Yup this works, so the problem is in the php somewhere, or the ajax fails for some reason. – tomca32 Oct 18 '13 at 03:05
@OLRAC, how would I add seconds ago after current on this line: `$('#refresh p').html('Last Scanned: '+current);` – user2732875 Oct 18 '13 at 03:09
2

$('#refresh p').html('Last Scanned: '+current +' seconds ago.'); – tomca32 Oct 18 '13 at 03:10
gracious --> is there a way to let it be known to put minutes in there if exceeding over 1 minute? So for example: `Last Scanned: 1minute 30seconds ago` – user2732875 Oct 18 '13 at 03:13
Thank you all for your help! --> @tomca32, if you want to edit your initial answer to what you have in that last fiddle, I'll select your answer as correct ;) – user2732875 Oct 18 '13 at 03:27

Count up timer using ajax, javascript for a specific div

1 Answers1