CODEWITHSUNDEEP
javascriptajaxjquery
Jindra
Jindra

Reputation: 810

Removing / reloading already loaded scripts

I am loading page by ajax. Whole page including <html> <head> <body>. So I need to call all the scripts which are supposed to be called on page loaded. But browser remembers that some of them had loaded to this windows and he will not execute them again.

How can I delete all loaded scripts?

Or better, how to load entire page, but have some old objects working in background from previous page? For example upload and other communications.

Code: this.load = function(adr) {
this.iris();

    $.ajax({
          type: 'GET', 
          url:  adr,   
          dataType: 'html',
          success: function(data) 
          {    
            $("body").html(html);  
          }
    });

edit: Sorry guys, i have wrote it wrong probably, because your answers are good but solving something else, wchich i could solve by myself. So i will try to tell it in different way.

So when i load HTML by ajax it will not initialize on this new HTML. (for example will not find and will not add listeners).

Upvotes: 1

Views: 8968

Answers (3)

J. K.
J. K.

Reputation: 8368

When you execute a script, you cannot un-execute it and it is kept in the scope even if you replace the whole DOM.

So if you create an object window.a = new A(); and replace the DOM with $('body').html(html);, the object will still be accessible as window.a.

Update:

I imagine your script definitions are included in the <head> and you have one place where you call them.

<!DOCTYPE html>
<html>
<head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</head>
<body>
  ... content ...

  <script>
window.onload = function () {
  // initialization code here
};
  </script>
</body>
</html>

Place the initialization <script> in the head as well while storing the function in a variable. Then when you load new content replace just the contents of <body> and call the function.

<!DOCTYPE html>
<html>
<head>
  <script src="script1.js"></script>
  <script src="script2.js"></script>

  <script>
var a = function () {
  // initialization code here
};

var load = function (adr) {
  $.ajax({
    type: 'GET', 
    url:  adr,   
    dataType: 'html',
    success: function (data) {
      data = data.exec(/<body[^>]*?>(.*)<\/body>/i);
      $("body").html(data);

      a(); // call the function after each load
    }
  });
};
  </script>
</head>
<body onload="a()">
  ... content ...
</body>
</html>

Upvotes: 3

Supr
Supr

Reputation: 19022

Instead of putting the initialization code directly in the script so that it is executed immediately, put it in a function and then call that function as needed.

Include this once:

function initialize() {
    alert('(Re)initializing');
}

Then whenever the page is "reloaded", just call initialize() again.

Upvotes: 0

Christian
Christian

Reputation: 28124

The only way to 'unexecute' a script is to design it as such in the first place.

This isn't particularly hard, but it takes some knowledge - there is no magic switch to turn this on.

For example...

index.html

<script src="script1.js"></script>
<script src="script2.js"></script>
<script> alert(pie); </script>

script1.js

var pie = 'Hello world!';

script2.js

var pie = 'Hello cruel world!';

So in short, an important pre-requisite would be that you keep all the code inside one single entry point, which you can easily overwrite/remove later on.

Upvotes: 1

Related Questions