CODEWITHSUNDEEP
jquery
Stewie Griffin
Stewie Griffin

Reputation: 9327

understanding jQuery $.getScript()

I use getScript to load dynamically my plugin:

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

  1. 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
   });
};

  2. 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?

Upvotes: 10

Views: 14672

Answers (5)

oriadam
oriadam

Reputation: 8599

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)

Upvotes: 3

Kieran
Kieran

Reputation: 6186

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.

Upvotes: 6

Vishal Verma
Vishal Verma

Reputation: 982

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.

Upvotes: 4

John Pick
John Pick

Reputation: 5650

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).

Upvotes: 23

Jakub
Jakub

Reputation: 20475

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)

Upvotes: -3

Related Questions