CODEWITHSUNDEEP
javascriptjquery
user2177118
user2177118

Reputation: 37

page reload not triggering document ready

The following td is updated on 1st page load by the javascript to yeild the result below (i.e.it all works). However when pagination links are called the document ready is not called & thus the date not re written. Ive tried various things but dont seam to get it working. On page rewriting the attribute is updated server side. There are no ajax calls, the pagination link is just a simple url reloading the same page but with the query path changed. I understand the reload behaviour is normal - i just cant workaround it.

Any Ideas please to invoke my initialise call on subsequent loads?

<td class="date" data-time="1499543100110"></td>

$(document).ready(function () {
    initialise();
});

function initialise() {
    $(".date").each(function(){
        var millisec = parseInt($(this).attr("data-time"));
        var ts = moment(new Date(millisec)).format("MMMM Do YYYY, h:mm:ss a");
        $(this).text(ts);
    });
}

<a href="?page=6&amp;size=20&amp;criteria=" data-ajax-load="#ajaxload">7</a>

output

<td class="date" data-time="1499543100110">July 8th 2017, 8:45:00 pm</td>

update

As was suggested below there was more to the issue. The pagination link was being captured & the request was being issued by ajax, bypassing all the normal js hooks. I removed the capture below & every thing works as expected. The network url traffic looked like straight forward page-load but was in fact an ajax call.

$(document).on('click', 'a[data-ajax-load]', function(event) {
    var _url = $(event.target).attr('href');
    var _target = $(event.target).data('ajax-load');
    $(_target).load(_Url + ' ' + _target, 
        function(response, status, xhr) {
            // display errors etc
        }
    );
    return false;
});

The answers below are all probably correct, but did not need to explore them - thanks for guidance.

Upvotes: 1

Views: 2978

Answers (2)

csk
csk

Reputation: 4349

You can try using 'onload' on your body tag as follows:

<body onload="myFunction()">
  //Code
</body>

What this does is that it waits for the tag, in this case the <body> tag, to fully load before executing the function (myFunction() in this case.)

Your edited code should look something like this or something similar:

<body onload="initialise()">
  <td class="date" data-time="1499543100110"></td>

  function initialise() {
    $(".date").each(function(){
      var millisec = parseInt($(this).attr("data-time"));
      var ts = moment(new Date(millisec)).format("MMMM Do YYYY, h:mm:ss 
    a");
      $(this).text(ts);
    });
  }

  <a href="?page=6&amp;size=20&amp;criteria=" data-ajax load="#ajaxload">7</a>
</body>

Edit: After some online researching, I found this:

You can use the JavaScript body.onload() function as well to stimulate a similar effect as follows:

body.onload(initialise);

I am not an expert in jQuery, but looking at your code, I assume that you can also do this though I'm not sure:

$(body).onload(function () {
  initialise();
});

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I just found this...
Try using ajaxComplete()... It fires when an ajax request has completed.

$( document ).ajaxComplete(initialise);

;)

Upvotes: 0

Related Questions