Moment.js not working on dynamically loaded elements

Asked Aug 25 '20 at 13:36

Active Aug 25 '20 at 13:46

Viewed 58 times

I'm using moment.js for local time formatting. It's working fine with initially loaded elements but when the elements are loaded via ajax, the time formatting (moment.js) is not working.

My initializing code for moment.js:

$(function () {
    var htmlLang = $('html')[0].lang;
    moment.locale(htmlLang);
    $( "[data-time-format]" ).each(function() {
        var el = $( this );
        switch(el.attr("data-time-format")) {
            case "time-ago":
                var timeValue = el.attr("data-time-value");
                var timeAgoStr = moment.utc(timeValue).fromNow();
                el.text(timeAgoStr);
                break;
        }
    });
});

my ajax loader would look like:

$.ajax({
        url: "/path/loadData.php",
        type: "POST",
        data: { jsondata:jsondata },
        dataType: "html",
        success: function(response) {
          $("container").append(response);
          //I guess I have to reinitialize moment.js
        },
        error: function() {
          alert("Data not loaded.");
        }
      });

edited Aug 25 '20 at 13:43

asked Aug 25 '20 at 13:36

Bipul Roy

1

You need to call the function again after loading - there is no event here – mplungjan Aug 25 '20 at 13:39
1

Not reinitialise, but you need to run it again – mplungjan Aug 25 '20 at 13:41
Inside the `success` after you insert new elements – charlietfl Aug 25 '20 at 13:43
1

So `function formatTimeAgo() { $( "[data-time-format=time-ago]" ).each(function() { var timeValue = $(this).attr("data-time-value"); var timeAgoStr = moment.utc(timeValue).fromNow(); $(this).text(timeAgoStr);});}` and call `formatTimeAgo()` onload and in success – mplungjan Aug 25 '20 at 13:43
@mplungjan To be fair, as you say, there's no event here, so I'm not sure that's the right dupe. You can't really apply the answers to that question to this one... – Heretic Monkey Aug 25 '20 at 13:44
@HereticMonkey found another one – mplungjan Aug 25 '20 at 13:46
1

@mplungjan I like the second one you added. – Heretic Monkey Aug 25 '20 at 13:46
it works now @mplungjan. I would like to accept your comment as my answer if you make it an answer :) . – Bipul Roy Aug 26 '20 at 03:50
It’s ok - enjoy – mplungjan Aug 26 '20 at 04:03

Moment.js not working on dynamically loaded elements

0 Answers0