Update timestamps every 30 seconds using setInterval()

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

}

setIn开发者_如何转开发terval(update_timestamps(), 30000);

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

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

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

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).

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.