jQuery.getScript() does not cache
It occurred to me today that when using jQuery’s handy little .getScript method that each script request is appended by a timestamp appended to the querystring. This is great. A lot of the time this is exactly what you want as it ensures that no browser will ever serve up it’s own cache in preference of the actual script from the actual server.
But what if you just want to use .getScript to programatically include parts of your application logic only where necessary (aka Lazy Loading), or you simply want to defer the execution of a non-essential plugin or two until a couple of seconds after the DOM becomes available. You’d want those scripts cached as if you’d hard-coded them into script tags right? I guess.
Can’t Cache, Won’t Cache (with Ainsley Harriott)
There’s no way you can send cache control options into getScript. It simply doesn’t accept any. getScript is merely a wrapper around .get which itself does not provide options for controlling caching. I’m not sure whether or not this is an oversight on the part of the developers. Feel free to shoot me down in flames if i’m spectacularly missing some glaringly obvious point here.
It’s not a problem though. .get is itslef just a simple wrapper around .ajax which publicly exposes all of jQuery’s AJAXy goodness. As such there’s absolutely no reason why you can’t just redefine JQuery.getScript to accept an optional boolean argument for cache control. That’s the beauty of jQuery.
jQuery.getScript Redefined
$.getScript = function(url, callback, cache){
$.ajax({
type: "GET",
url: url,
success: callback,
dataType: "script",
cache: cache
});
};
This won’t break any existing code which references the function as omitting the cache argument defaults caching to false as per the original functionality. But if you want to allow caching you now have that option.
Posted in Web | Tagged with: AJAX, JavaScript, jQuery
August 22nd, 2008 at 12:43 pm
Thank you for this.
October 19th, 2008 at 8:00 pm
Clap, Clap, Clap
February 4th, 2009 at 1:59 pm
Or maybe this?
// turn on cache
$.ajaxSetup({ cache: true });
$.getScript(url, callback);
// turn cache back off
$.ajaxSetup({ cache: false });
Not as elegant I know
February 11th, 2009 at 9:32 pm
I’m all about the elegance David. That’s just the way I roll
February 13th, 2009 at 6:24 am
Simple, yet Fabulous!
April 3rd, 2009 at 1:13 am
Exactly what I was looking for, problem, solution, code.
I shall go off and be cache free once more.
April 26th, 2009 at 8:41 pm
Thank you, just was looking for a solution like this. I’ve been building an application with many script includes on-the-fly and jquery not caching caused significant delays with browsers.
I like David’s solution. I use it like this:
$.ajaxSetup({ cache: true });
$.getScript(urlhere, function(){
// main function code goes here
$.ajaxSetup({ cache: false });
});
June 22nd, 2009 at 10:41 am
This post is rather old, but since people continue to comment, I thought, I may do so as well.
It should be noted that using $.ajax(…) like explained above will only work, if the caller provides a callback. Therefore this re-definition of getScript does not everything that getScript does – it will not auto-execute the code, if no callback is specified.
Loading and executing a script while allowing caching, can also be done like that:
$.get(url, {},
function(data){eval(data);}
);
In that case, the browser will just issue a normal get request without any added parameters.
June 22nd, 2009 at 11:19 am
P.S. – those who do not want to use eval(..), for example because the YUI compressor will then do less minification, can also do that:
$.get(url, {},
function(data){ (new Function(data))(); }
);
This will create a function around the loaded code and then execute this function, which will not affect Yahoo’s minification behavior.
September 22nd, 2009 at 4:40 am
Christian: “It should be noted that using $.ajax(…) like explained above will only work, if the caller provides a callback. Therefore this re-definition of getScript does not everything that getScript does – it will not auto-execute the code, if no callback is specified.”
I think you’re mistaken. I’m finding the solution performs as stated on FF 3.5, Safari 4 and IE 6 & 7.
Looking the jquery source show’s that since the dataType is set to “script”, jquery builds a script tag and sets the src attribute to the url passed. This occurs around line 3473 in jQuery 1.3.2.
October 29th, 2009 at 8:50 pm
Brilliant! Thanks. I’m grateful for folks who take the time to post solutions to little issues like this. Good job.
Incidentally, I can confirm that in use the script that is retrieved does indeed get executed without a callback specified.
April 12th, 2010 at 3:00 pm
[...] more here: jQuery.getScript() does not cache – Jamie Thompson If you enjoyed this article please consider sharing [...]
February 27th, 2011 at 12:49 pm
Please Help Me !!!
March 23rd, 2011 at 2:25 pm
Works perfectly, thank you!
April 6th, 2011 at 11:26 am
[...] 解法參照http://jamiethompson.co.uk/web/2008/07/21/jquerygetscript-does-not-cache/ 原來$.getScript()也有同樣的問題， 解法就是使用jQuery低階ajax API 。 [...]
June 9th, 2011 at 5:03 pm
Hi, are you sure about the script not caching as one of the first questions on the jQuery documentation page for .getScript() states that it DOES cache!!
See here: http://api.jquery.com/jQuery.getScript/
July 4th, 2011 at 8:15 pm
Made my day