How do I use jQuery timeago to live update?
-
27-10-2019 - |
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?
Solution
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')
.
OTHER TIPS
I tried the above with no luck.and i found this. might be helpful.
https://mattbradley.github.io/livestampjs/
Here <span data-livestamp="your time goes here..."></span>
is enough.
Don't forget to add jquery.js
and moment.js
before livestamp.js