jQuery timeago usage

Question

I have an <abbr> tag with class "timeago" in my HTML. When I set it value on page load, then call jQuery("abbr.timeago").timeago(); on document ready function it works.

My question is, what if I change abbr.timeago title dynamically from some javascript function, how can I make timeago plugin to do its magic on the updated abrr.timeago element?

Which function should I call? Should I remove jQuery("abbr.timeago").timeago(); from document ready function or leave it ? thank you

EDIT QUESTION:

@squiddy example works, updates the time only once and it just remains like that unchanged. For example if I put timeago to current time .. then it just stands like that it doesn't change?

BOUNTY UPDATE :

Please disregard previous question. In my website there is a link upon its click getJSON function is invoked which gets some information from server into a table.

Each row represents feedback from the server. Here is my getJSON pseudo code :

            $.getJSON("feedback/" + feedbackId, function(data) {
            var column ... declared variable in which column selector
        .... some logic that populates table(irrelevant)
            //Store last checked time in title
        column.attr("title", iso8601(new Date()));
            //invoke timeago on this title
        column.html(jQuery.timeago(iso8601(new Date())));
            ....iso8601 is date format function
    });

So this getJSON is invoked for every feedback I get from the server(n times). And when json completes the appropriate column in table is populated with last updated time.

But it seems that timeago is not reading the changed title value, it does not recognize updated DOM. I put a console.log(element.attr("title")) for each feedback from server for debugging purposes just to see if I set the title attribute to current time, and it does indeed but the timeago picks up the initially loaded title value.

What should I do I also tried this version :

$.getJSON("feedback/" + feedbackId, function(data) {
                var column ... declared variable in which column selector
            .... some logic that populates table(irrelevant)
                //Store last checked time in title
            column.attr("title", iso8601(new Date()));
                //invoke timeago on this title

                $(column).livequery(function() {
                $(this).timeago(iso8601(new Date()));
                console.log($(this).attr("title"));
            });  
        });

I've spent few hours trying several possible solution .. like a function called every n seconds, to call the timeago function but always the same results

Answer 1

UPDATE 2: Same trick works here. The element column was previously converted by timeago once, when that happend, timeago placed a 'timeago' data field on the element. When this data field is present timeago won't bother with it, so you have to clear it. The code would look somethink like this:

$.getJSON("feedback/" + feedbackId, function(data) {
    var column 
    // ... declared variable in which column selector
    // ... some logic that populates table(irrelevant)
    // Store last checked time in title
    column.attr("title", iso8601(new Date()));
    // invoke timeago on this title
    column.data("timeago",null).timeago();
    // ... iso8601 is date format function
});

UPDATE: corrected, tested, the trick was, that timeago plugin marks the elements which were already turned, and dont let them turn again, unless the mark is cleared

When you change the value in abbr.timeago, you should run the timeago() function only on that element again. I would recommend some function for this:

$.fn.changeTimeago = function(isotime) {
    return $(this).attr("title",isotime).data("timeago",null).timeago();
}

// usage:
$("abbr.timeago").changeTimeago("2004-07-17T09:24:17Z");

Hope this is what you needed!

Answer 2

As of v1.1.0, jquery.timeago.js now provides an update action that can be used:

From: https://github.com/rmm5t/jquery-timeago/pull/115

$(column).livequery(function() {
  $(this).timeago('update', iso8601(new Date()));
});

Answer 3

don't add any javascript or jquery code except this;

$('.timeago').timeago();

and then add 'Z' (or including T). for more information go to this link

<abbr class='timeago' title='2011-09-09 10:10:10Z'></abbr>

http://en.wikipedia.org/wiki/ISO_8601#Combined_date_and_time_representations

Answer 4

I couldn't get it to work after changing the value in the title attribute, but timeago supports a direct approch like this:

jQuery.timeago(new Date());             //=> "less than a minute ago"
jQuery.timeago("2008-07-17");           //=> "2 years ago"
jQuery.timeago(jQuery("abbr#some_id")); //=> "2 years ago" [title="2008-07-20"]

So when changing an element, update the html yourself:

jQuery("abbr.timeago").html(jQuery.timeago("2010-07-17T09:24:17Z"));

Answer 5

If you wish to update the timeago element with a new date. The simplest way to do is as follows -

$('abbr.timeago').timeago('update',(new Date()).toISOString());

It works like a charm. I don't understand why it is not documented anywhere. You can find this function by looking at timeago javascript code.