After JQuery load() function, rest of JavaScript stops working

Question

I have a page with a JavaScript countdown and Bootstrap's tooltip JavaScript. They work very well, until I reload the page with jQuery's load(); function.

After I trigger load(); function couple of seconds after page load, other JavaScript stops working.

Check my page: http://areafordemos.freeoda.com/reload.html

I don't understand why simple refresh is causing that, and how to solve this problem? I tried to place JavaScript code to other places but no help.

Here is my Javascript code:

//JavaScript code for load() after few seconds.
setTimeout(function(){

    $().ready(function() {
    $(".reloadthis").load("reload.html .reloadthis");
    });


}, 5000);

//JavaScript code for tooltip.
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

//JavaScript code for countdown
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0) {
      document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
      return true;
    }

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2016-01-01T12:00:00+02:00';
console.log(deadline);

initializeClock('clockdiv', deadline);

Possible duplicate of Jquery Event wont fire after ajax call — JJJ
– JJJ, Commented Dec 29, 2015 at 13:22
Will element before .load be the default target? I mean $("#container").load("temp.html #innerContainer") here innerContainer would be the target, but in OP example both values are same. Note: Apologies for stupid question. have never used it but will surely look into it later — Rajesh Dixit
– Rajesh Dixit, Commented Dec 29, 2015 at 13:24
The usage is correct. It replaces the contents of .reloadthis with the contents of the loaded document's .reloadthis. — JJJ
– JJJ, Commented Dec 29, 2015 at 13:27

SidOfc · Accepted Answer · 2015-12-29 13:26:47Z

3

When you bind an event to an element in javascript, the handler will live on the element itself rather than keeping a reference to it's class so when you reload new contents in the page, the JS won't be bound to them anymore.

You can do (atleast) two things to fix your issue.

One of them would be to re-run your JS by redoing the function calls.

e.g. Whenever you do $.load you can add a callback that should run after it's done fetching the contents of the page.

For instance:

$('.reloadthis').load('reload.html .reloadthis', function(resp, status, xhr) {
    call_functions_again(); // psuedo, you'd want to re-call your functions here to make them work with ajax loaded content
});

You could also try looking into event delegation but this serves different purposes like automatically binding events to newly added elements in the DOM by listening on the parent instead and letting the event bubble to children.

answered Dec 29, 2015 at 13:26

SidOfc

4,6143 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

LetsSeo Over a year ago

I really appreciate your help. I would like re-run my javascript codes. But how to apply call_functions_again(); to them? I tried to copy/paste other javascript code into that block but probably what i did is ridicilious.

JJJ Over a year ago

@LetsSeo You just need to call initializeClock('clockdiv', deadline); again.

SidOfc Over a year ago

call_functions_again() is a made-up function name by me, it doesn't do anything except give errors unless you've defined it yourself. In your case start out with replacing call_functions_again() with whatever functions need to actually be called to manipulate whatever is in .reloadthis

LetsSeo Over a year ago

Thanks @SidneyLiebrand and @Juhanna, unfortunately this is the step I can't go any further. I even tried to change my javascript to

$().ready(function() {     $(".reloadthis").load("reload.html .reloadthis");     $('[data-toggle="tooltip"]').tooltip();     });

to rerun tooltip javascript but didn't work. If you would like to help me I really appreciate it, if not thanks for your helps so far.

SidOfc Over a year ago

@LetsSeo this is because the $.load will take some dozens of milliseconds and the $('[data-toggle="tooltip"]').tooltip() line will run before the ajax request is finished.

|

Collectives™ on Stack Overflow

After JQuery load() function, rest of JavaScript stops working

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related