Question

I have the following HTML page:

sample_page.html:

<h1>sample html page</h1>
<script type="text/javascript" src="sample_page.js"/>

The sample_page.js is an empty JSfile.

Now try to load it using JQuery AJAX:

$('div').load('sample_page.html', function(){
   alert('loaded');
});

Now if you use Firebug to examine the request, you’ll see that jQuery requests the sample_page.html and the page itself gets cached (http status code 304). However, it strips out the script tags from the HTML file and executes them (probably using $.getScript). The problem is that it appends a time-stamp to the JavaScript file so it is never cached (status 200).

For a single paged application, this means that every-time a user goes to a page, the script file is reloaded again. Is there anyway to fix this issue?

Answer 1

Apparently, .getScript() does not support the any caching options. Its source code is this:

getScript: function( url, callback ) {
  return jQuery.get(url, null, callback, "script");
}

Since it is a convenience wrapper around .get() you could:

• either modify the global Ajax options via .ajaxSetup() before you call .load(). These settings would also affect .getScript():

  $.ajaxSetup({ cache: true });
  

• or you could modify getScript() itself:

  $.getScript = function(url, callback){
    $.ajax({
      type: "GET",
      url: url,
      success: callback,
      dataType: "script",
      cache: true
    });
  };  
  

  jQuery will not break from this modification. This code is absolutely equivalent to the original implementation for all intents and purposes, except that caching is enabled by default.