Question

I am using the jQuery timeago plugin from https://github.com/rmm5t/jquery-timeago

It works fine on page load, but I generate some content in a modal window using .load and it doesn’t seem to affect it.

To initialize timeago I have:

$(document).ready(function() {
    $('time.timeago').timeago();
});

This is the jQuery I use to load the content in the modal:

$(document).ready(function () {

    // on click, serialize all form elements and insert/update database
    $('.comment').click(function (e) {

        e.preventDefault();
        var $this = $(this);
        var csrf = $('input[name=csrf_gpin]').val();
        var pin_id = $this.closest('.grid-box').attr('data-id');

        $('input[name=comment_pin_id]').val(pin_id);

        $("#modal-comment").reveal();

        // load all comments associated with pin
        $("#comments").load('/comment/pin', { 'csrf_gpin' : csrf, 'pin_id' : pin_id });

    });
});

The HTML inside the loaded content is:

<time class="timeago" datetime="2012-11-19T20:35:14+01:00" title="November 19, 2012">2 days ago</time>

How can I re-initialize timeago so that it will work on this generated content?

Answer 1

Try to initialize timeago after the loading is completed:

$("#comments").load('/comment/pin', 
           { 'csrf_gpin' : csrf, 'pin_id' : pin_id },
           function(){   //A callback function that is executed when the request completes
               $(this).find('time.timeago').timeago();   
           });