0

I'm using one of the automatic timeago plugin called Livestamp.js (http://mattbradley.github.io/livestampjs/). It seems to collaborate with moment.js to automatically convert this:

<span data-livestamp="1488615741"></span>

to this:

<span>8 minutes ago</span>

in every time interval.

But I don't like that because the glitch will be observable in few miliseconds before the <span> finally automatically converted. Because of that, I want to do it manually via jQuery, so if I done .append(), I want the <span> to converted immediately.

I have tried to do this

$('div').append(data).promise().done(function() {
    $(this).find('span[data-livestamp]').livestamp($(this).data('livestamp'));
});

But it not work. The <span> is indeed converted immediately, but "a few seconds ago", while actually it's 6 days ago.

How to accomplish this?

Update changed the code to be more simple to understand.

Taufik Nur Rahmanda
  • 1,862
  • 2
  • 20
  • 36

1 Answers1

1

In $(this).data('livestamp'), $(this) refers to a wrong object. Instead, iterate over the livestamps with .each. Inside .each(function () {...}), this would refer to the Livestamp span:

$('div').append(data).promise().done(function() {
    $(this).find('span[data-livestamp]').each(function () {
      $(this).livestamp($(this).data('livestamp'));
    });
});

Previous answer (not relevant, as the comments have shown):

If you have a delay, the jQuery will have a similar delay before the code is applied.

All client-side JavaScript works this way: the JavaScript is embedded into the page, so, the browser first loads the page, then it loads and runs the JavaScript on that page. Before the JavaScript has been run, you’ll notice the old state of things.

Instead, to avoid the delay, provide the default values via your server-side language, so that this HTML is served:

<span data-livestamp="1488615741">8 minutes ago</span>

Of course, you can’t just write ‘8 minutes ago’, you need to use a server-side language like PHP to generate a pre-defined value. For example, if your page is generated in PHP, your variable is named $time, and you are using php-time-ago, you could write:

<?php $timeAgo = new Westsworld\TimeAgo(); ?>
<span data-livestamp="<?= $time; ?>"><?= $timeAgo->inWords('@' . $time); ?></span>

This way, the PHP-generated text will be shown before the Livestamp starts working, and the JavaScript code will take care of keeping the time reference up-to-date.

Of course, you will probably use a different server-side language, different variable names and different libraries, this is just an example.

Dzmitry Kushnarou
  • 566
  • 3
  • 10
  • Actually the jQuery or client-side is okay for me, there's no observable delay if I doing like in my post above. The only problem I questioned here is just how do I write the manual call using `.livestamp()` to trigger to change instead of waiting plugin's interval to do it? I think I just have wrong code because it converted to "a few seconds ago" while actually is 6 days ago. – Taufik Nur Rahmanda Mar 04 '17 at 10:11
  • 1
    Thanks for the comment, now I understand the problem better! I’ve changed my answer, please check if the new solution works. – Dzmitry Kushnarou Mar 04 '17 at 10:24
  • 1
    Finally the problem found! Thank you! It's only because I don't use `.each()` :") my bad – Taufik Nur Rahmanda Mar 04 '17 at 10:28