Make timeago update live

Question

I'm using the timeago plugin and I need to make it update automatically so that if new times are passed to the page, it will update them.

Here's the default JQuery we're asked to put on our pages:

jQuery(document).ready(function() {
    jQuery("abbr.timeago").timeago();
});

My current issue is that, when I pass a new time from a PHP file using Ajax, it won't use the timeago plugin (it stays as the date, 2013-10-28, rather than 1 second ago, etc).

Here's the Ajax I have right now:

<script src="assets/js/jquery.js"></script>
<script src="assets/js/timeago.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $(document).on("submit", "form", function(event) {
        event.preventDefault();
        $.ajax({
            url: 'post.php',
            type: 'POST',
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data) {
                $(".container").html(data.message);
            }
        });
    });
});

$(document).ready(function() {
    $("abbr.timeago").timeago();
});

</script>

The post.php file called by Ajax:

<?php

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

    $array = array('message' => $code);

    echo $array;

?>

When the Ajax function is called, it returns the $code HTML, but it prints out July 17, 2008 on the page, rather than 5 years ago.

Answer 1

You need to specify some load time either in your class (loaded or modified, perhaps), or a date/time in the title attribute of the element. Check your HTML

For example, this:

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

will become this:

<abbr class="timeago" title="2008-07-17T09:24:17Z">about 5 years ago</abbr>