Question

I have a value 011-04-29T14:55:33.000Z this value gets push into a jQuery template. I used timeago to convert the date to elapsed time but after being written to the template it has no way of updating as more time passes.

How would I implement something that would automatically update?

Answer 1

Suppose you start with this (from the timeago homepage):

<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>

Now, the timeago plugin will change the title as it rewrites things. All you need to do is keep track of the timestamp elsewhere, put it back in the title attribute, and rerun the plugin. Something like this:

<abbr
    class="timeago"
    title="2008-07-17T09:24:17Z"
    data-ts="2008-07-17T09:24:17Z"
>July 17, 2008</abbr>

Will become this:

<abbr
    class="timeago"
    title="July 17, 2008"
    data-ts="2008-07-17T09:24:17Z"
>2 years ago</abbr>

And when you want to update it, just put data-ts back in title and rerun the plugin:

$('.timeago').each(function() {
    var $this = $(this);
    $this.attr('title', $this.data('ts'));
}).timeago();

If you’re using an older jQuery, you might need to use $this.attr('data-ts') in place of $this.data('ts').