Adding a script to the page dynamically with jQuery never uses the cached file

Question

I am using jQuery to dynamically add a script to my page and it works, but jQuery appends "_=TIMESTAMP" to the URL causing the browser to never use the cache. With the following code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $("head").append('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></scr' + 'ipt>');
    </script>
</body>
</html>

I can see in firebug that the URL requested is:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js?_=1313291978667

Does anyone know how to tell jQuery not to do this?

Thanks

Instead of appending the script tag you can use getScript method of jquery to get js script file on the page — ShankarSangoli
– ShankarSangoli, Commented Aug 14, 2011 at 3:28
Just as a tip you should use your urls starting with "//ajax.googleapis..." instead of "ajax.googleapis...". Because this will cause an error if your page is not accessed through SSL. Note that the url you are getting needs to support this hack (google services does). This will ensure that your page works both on SSL and without it. — Hoffmann
– Hoffmann, Commented Sep 6, 2013 at 14:24

Mrchief · Accepted Answer · 2013-03-25 19:34:00Z

26

To answer your original question, you see the timestamp appended because jQuery by default sets cache: false for script and jsonp calls which appends the timestamp to the URL.

To avoid the timestamp, you can do this:

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
  if ( options.dataType == 'script' || originalOptions.dataType == 'script' ) {
      options.cache = true;
  }
});

This sets up a global prefilter for all $.ajax calls, including the ones made by jQuery while requesting the script.

We inspect the dataType to make sure we're not inadvertantly targetting other ajax calls and explicitly set cache to true. This will avoid the timestamp appending problem.

You can now use your original code and it'll pick it up from cache.

edited Mar 25, 2013 at 19:34

answered Aug 14, 2011 at 4:32

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

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

4 Comments

Leslie Hanks Over a year ago

Excellent answer. While the other one worked for my particular case, this is a more complete answer.

Dennis Over a year ago

This helped me out, thanks. Just for the sake of completeness: that : needs to be a =.

Luke Over a year ago

@Mrchief where would you put this piece of code? I've tried to put it in the head, but each script tag is still appending a timestamp afterwards.

Mrchief Over a year ago

You could place anywhere between downloading jQuery and running your first ajax call. So if you're putting it in head, make sure you put if after jQuery is downloaded. Also, check if any other part of your code is downloading jQuery again. If so, then that jQuery download will wipe out this guy.

ShankarSangoli · Accepted Answer · 2011-08-14 03:32:13Z

7

You can use $.ajax to get the script instead of appending script tag

$.ajax({
  url: "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js",
  dataType: "script",
  cache: true,//This will decide whether to cache it or no so that it will not add the timestamp along with the request
  success: function(){}//In the success handler you can write your code which uses resources from this js file ensuring the script has loaded successfully before using it
});

answered Aug 14, 2011 at 3:32

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

OverZealous Over a year ago

I think you meant true, not ture on the cache.

Leslie Hanks Over a year ago

Your solution was exactly what I needed, but I didn't mark it as answer because I would still like to know if there is a way to fix the original problem. In this particular case, I just wanted to load the script, but what if I was loading HTML from an ajax request that used script includes? I would still want that to use the cache.

Timo Huovinen · Accepted Answer · 2014-03-27 13:56:06Z

4

Here is something that works for me

// Backup the jquery ajax cache setting
var jQueryAjaxSettingsCache = jQuery.ajaxSettings.cache;

// Disable the ?_=TIMESTAMP addition
jQuery.ajaxSettings.cache = true;

// Do the cached script inserting ...
$("head").append('<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></scr' + 'ipt>');

// Restore the jquery ajax cache setting
jQuery.ajaxSettings.cache = jQueryAjaxSettingsCache;

answered Mar 27, 2014 at 13:56

Timo Huovinen

56k34 gold badges163 silver badges150 bronze badges

Collectives™ on Stack Overflow

Adding a script to the page dynamically with jQuery never uses the cached file

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related