understanding jQuery $.getScript()

Question

I use getScript to load dynamically my plugin:

$.getScript('js/code.photoswipe.jquery-3.0.4.min.js', function () {
   //do magic
});

How do I disable caching busting? At the moment it generates numbers at the end: js/code.photoswipe.jquery-3.0.4.min.js?_=1326992601415 I saw this, but not sure how to use it in my case:
```
$.getScript = function (url, callback, cache) {
   $.ajax({
      type: "GET",
      url: url,
      success: callback,
      dataType: "script",
      cache: cache
   });
};
```
If I call $.getScript multiple times adding the same js file, does it do request each time to get that file? If so, is there a way to check if we already imported that script, so we could avoid calling getScript again for the same file?

_If I call $.getScript multiple times adding the same js file, does it do request each time to get that file?_ Without caching, separate requests are sent because of cache busting. With caching, it will be loaded from browser cache (browser might double check with server to see if it has the latest copy depending on how strong the caching headers are). — Salman A, Oct 23 '15 at 23:11

score 23 · Answer 1 · answered Apr 12 '12 at 00:59

23

How to disable the cache busting:

$.ajaxSetup({
  cache: true
});

That will ensure users grab the script from the server only once and from their local cache thereafter (unless their browser settings prevent caching).

answered Apr 12 '12 at 00:59

John Pick

5,562
31
31

2

WARNING: This will enable caching for every ajax call, not just your script call. – Doug S Oct 30 '15 at 06:51

score 6 · Answer 2 · answered Jul 02 '13 at 20:21

The jQuery docs for $.getScript say that getScript is shorthand for:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

http://api.jquery.com/jQuery.getScript/

This means that you just need to add a cache : true parameter to that.

$.ajax({
  url: url,
  cache : true,
  dataType: "script",
  success: success
});

Simple as that. The getScript function is nothing special, just shorthand.

Vishal Verma · Answer 3 · 2013-03-14T09:18:04.420

4

The short answer is unfortunately, you can't.

getScript can however be overridden like this:

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

If you include this in your js somewhere, it won't break existing code, and will also cache the fetched script.

Advantage
Using above snippet, you can enable caching for all the scripts on your page. So you don't need to re-specify with each script fetch.

edited Mar 14 '13 at 09:18

answered Oct 30 '12 at 06:53

Vishal Verma

962
8
18

No need. jQuery 1.12.0 and later supports passing an options object to `$.getScript` so you can `$.getScript({cache:true,url:url})` without overriding anything. – oriadam Dec 05 '17 at 10:52

oriadam · Answer 4 · 2017-12-05T10:50:50.130

2

1 . jQuery 1.12.0 and later supports the options object signature:

$.getScript({
    url: "foo.js",
    cache: true
})

2 . Assuming you set cache:true the file will be loaded from the browser cache (unless browser cache is disabled or expired, for example when devtools is open)

edited Dec 05 '17 at 10:50

answered Jul 05 '17 at 12:34

oriadam

7,747
2
50
48

1

This info is missing on the jQuery documentation is missing. I opened a pull request to update it. – oriadam Dec 05 '17 at 10:54

score -3 · Accepted Answer · answered Jan 19 '12 at 16:58

-3

Your browser will cache the url accordingly already.. So you don't have to worry about caching.

If however you want to bust the cache simply add a random string to the url like so:

$.getScript('js/code.photoswipe.jquery-3.0.4.min.js?' + Math.random(), function () {
        //do magic
});

?' + Math.random() will allow for a random number to append to your js file so caching is broken with each request for the file (as it randomly generates a number)

answered Jan 19 '12 at 16:58

Jakub

20,418
8
65
92

8

no it doesn't. If I have let say $.getScript onClick on the same page, it sends a GET with different number at the end e.g. js/code.photoswipe.jquery-3.0.4.min.js?_=1326992601415 – Stewie Griffin Jan 19 '12 at 17:05
what I wanna do, is to remove these numbers at the end, and onclick to check, if I already have that script imported, so I could just ignore getScript – Stewie Griffin Jan 19 '12 at 17:07
AJAX doesnt use concept of 'import' scripts. Every time is a new call, the difference is that you can cache (or not) this response – Ricardo Bin Jan 19 '12 at 17:22
try to use some function that have inside the script, if exception ocurs then try to load with $.getScript... – Jan 19 '12 at 17:24
7

@Jakub The OP doesn't want to bust the cache. He wants to disable cache busting. jQuery's getScript busts the cache by default. See my answer. – John Pick Apr 12 '12 at 01:02
2

This is wrong answer, does the exact opposite of what OP asked. – Salman A Oct 23 '15 at 23:08
1

Why did the OP select this as the answer, when it clearly does the exact opposite of what he asked? – Doug S Oct 30 '15 at 06:50

understanding jQuery $.getScript()

5 Answers5

Linked