0

I have a list of posts like so:

<ul>
    <li>
       <p class="post" id="432">This is a post</p>
       <p class="timestamp">5 minutes ago</p>
    </li>
    <li>
       <p class="post" id="589">This is another post on the site</p>
       <p class="timestamp">1 hour ago</p>
    </li>
</ul>

I want to update the timestamp every 30 seconds (much like facebook timestamps) using setInterval().

function update_timestamps(){


    $('.timestamp').ajax({
        type    : 'POST', 
        url     : '/ajax/refresh_timestamp', 
        data    : { 'post_id' : $(this).closest('li').find('p.post').attr('id') },          
        success : function(data){ 
            $(this).html(data);
        }
    });

}

setInterval(update_timestamps(), 30000);

Obviously something is wrong with my .ajax() function, or maybe I shouldn't use ajax() at all?

4
  • So what is it currently doing?
    – a'r
    Aug 18, 2011 at 6:24
  • Right now, nothing is updating.
    – floatleft
    Aug 18, 2011 at 6:30
  • You may have a boo-boo in your call to setInterval. It looks like you're passing the return value of update_timestamps rather than a reference to the function. I think you want to do this: setInterval(update_timestamps, 30000);. Aug 18, 2011 at 6:49
  • I think the approach needs to be rethought entirely. I'm just not sure what the best practice is.
    – Nic
    Aug 18, 2011 at 6:59

4 Answers 4

7

If you want to show only "time ago" why use ajax at all?
Just use this plugin, timeago

2
  • Logic error. This will eventually crash the browser. If it calls update_timestamps for each element it will eventually be running the function infinitely.
    – Coomie
    Aug 18, 2011 at 6:51
  • +1 for the point that ajax in this case does not make sense at all :)
    – GorillaMoe
    Aug 18, 2011 at 7:34
3

This isn't really an answer to your question but... an alternative, that would mean you could avoid the ajax calls all together, would be to add the timestamp to the attribute, something like:

<ul>
  <li>
    <p class="post" id="432">This is a post</p>
    <p class="timestamp" data-timestamp="1313649170147">5 minutes ago</p>
  </li>
  <li>
    <p class="post" id="589">This is another post on the site</p>
    <p class="timestamp" data-timestamp="1313649189299">1 hour ago</p>
  </li>
</ul>

Then you would process your timestamps client side:

function updateDateTimestamps() {
  $('.timestamp').each(function(i, t) {
    var $t = $(t);
    $t.text(prettyDate($t.data('timestamp')));
  });
}

For an implementation of prettyDate see http://ejohn.org/blog/javascript-pretty-date/

Then pass updateDateTimestamps to setInterval:

setInterval(updateDateTimestamps, 30000);
2

Nothing is inherently wrong with your ajax function. You're just calling setInterval wrong:

setInterval(update_timestamps, 30000);

(notice the function reference to update_timestamps, not function call)

If you think hard, you will realize for yourself why what you did didn't work (hint: you're passing undefined to setInterval).

1

From the fine manual:

context
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).

So your this in the success callback is, essentially, just the AJAX options. So either specify the right context option to get the this you're expecting or use an explicit selector:

success : function(data){ 
    $('.timestamp').html(data);
    setTimeout(update_timestamps, 30000);
}

You probably want to add an error callback to restart your timer if there was an error. Or use the complete callback for that:

success: function(data) {
    $('.timestamp').html(data);
},
complete: function() {
    setTimeout(update_timestamps, 30000);
}

Even with all that you still have a problem with .timestamp matching multiple things in your callbacks so you'll need to adjust your whole approach (i.e. id attributes on the .timestamp elements and an id-to-timestamp mapping in the returned data). Or just ditch the AJAX and listen to naveen.

4
  • Thanks mu. I thought something was up with the this in the statement, but couldn't put my finger on it.
    – Nic
    Aug 18, 2011 at 6:45
  • @melee: There's still a uniqueness issue with .timestamp (see my update), I was going to delete this but I brought it back, noted the next problem you'll face, and told you to pay attention to naveen instead. Aug 18, 2011 at 6:52
  • I'm not the OP, just a javascript enthusiast that is up too late trying to help people out :P
    – Nic
    Aug 18, 2011 at 6:54
  • @melee: I'm up too late too :) Also trying to do too many things at once and one of those things should be sleeping. Aug 18, 2011 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.