Question

I’m using the following script to request new content to a file called index.html:

function addJS(js_urls) {
  $.each(js_urls, function(index, value) {
      $.ajax({
          type: 'GET',
          async: 'false', //We should not cache dynamic js-scripts
          dataType: 'script',
          url: value
      })
  })
}

function updatePage(data) {
  if(data['js']) {addJS(data['js']);}  //If any js-scripts are requested, load them
  $.each(data, function(index, value) {
      $('#' + index).html(value);
  });
  return false; //Stop link from redirecting
}

function ajaxRequest(url) {
  if(ajaxReq) {ajaxReq.abort();} //Abort current ajax requests if they exist
  ajaxReq = $.ajax({
      type: 'GET',
      cache: 'false', //We should not cache content
      url: url,
      dataType: 'json',
      success: updatePage
  });
}

And lets say that my index.html looks like this:

<div id="content">Content to be replace</div>

To clarify what happens here. The ajax request return json data, if that json data contains an entry called “js”, then the urls in that entry are loaded through the addJS function. As you can see, I’m not caching the js-scripts.

So my question is, if i request a new url, using the ajaxRequest function, will the js-scripts i’ve already loaded disappear? Or will they be there so that I can use them through the new content?

Thanks for your time!

Answer 1

If I understand the question correctly, the answer is “no”, your already-loaded scripts will not “disappear.” However, if you’re reloading scripts that define global functions or global variables, then things you’ve changed will be overwritten.

In other words, if you’ve got a script that does something like this:

var globalvar = "hello world";

and in the course of processing stuff your page somewhere does:

  if (whatever) globalvar = "goodbye world";

then if you reload the script, that variable will be set back to its original value.