Prevent jQuery.getScript adding ?_=timestamp

Question

How to prevent jQuery.getScript from adding ?_=timestamp on URLs?

error log

Source code:

$.getScript('/js/ace/ace.js',function(res) {
 // do something
}); 

Answer 1

This seems to be related to $.getScript('/js/ace/ace.js',function...) calls.

You can consider adding the following snippet as high up as possible:

$.ajaxSetup({
 cache: true
}); 

Putting the cache: true in your $.ajax() doesn't affect $.getScript('/js/ace/ace.js',function...)
in any way and that's what visible in that screenshot.

Another way, as described at jQueryByExample:

(1) before making call to $.getScript method, you can set the cache true for ajax request and set it to false once script is loaded.

//Code Starts
//Set Cache to true.
$.ajaxSetup({ cache: true });
$.getScript(urlhere, function(){
 //call the function here....
 //Set cache to false.
 $.ajaxSetup({ cache: false });
});
//Code Ends

(2) All you need to do is to add a boolean parameter, which will set the cache attribute to true or false. That's the beauty of jQuery that you can redefine things the way you need.

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

So,now you call the $.getScript like, (notice the 3rd argument)

//Code Starts
$.getScript('js/jsPlugin.js',function(){
 Demo(); //This function is placed in jsPlugin.js
}, true);
//Code Ends

• Vikrant: @Kokizzu, check another couple of solutions
• Kokizzu: ah wait, it works, previously I misread the $.ajaxSetup as $.ajax
• Pekka: Plagiarism: copied without attribution from jquerybyexample.net/2012/04/…
• Vikrant: @Pekka웃, answered this long back, when was not aware of proper practice. Edited post.. mark words, it was not intentional! thanks for notifying.

Answer 2

I made another aprouch using promises, based on previous responses, think that's more interesting.

window.loadScripts = (scripts) => {
 return scripts.reduce((currentPromise, scriptUrl) => {
 return currentPromise.then(() => {
 return new Promise((resolve, reject) => {
 var script = document.createElement('script');
 script.async = true;
 script.src = scriptUrl;
 script.onload = () => resolve();
 document.getElementsByTagName('head')[0].appendChild(script);
 });
 });
 }, Promise.resolve());
};

Let's play

var scripts = [
 "app/resources/scriptDoSomething.js",
 "app/resources/somethingElse.js"
];
loadScripts(scripts).then(() => {
 alert('All scripts were loaded!');
});

Answer 3

Nevermind, I made my own getScript based on Caolan's answer:

H = H || {};
// load a script and run a callback
H.loadScript = function(src, callback) {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = src;
 script.addEventListener('load', function (e) { H.ExecIfFunction(callback,e); }, false);
 var head = document.getElementsByTagName('head')[0];
 head.appendChild(script);
};
// sources is array, the load process is serial
H.loadScripts = function(sources, callback) {
 var len = sources.length;
 var now = 0;
 var loadOne = function() {
 if(now < len) return H.loadScript(sources[now++],loadOne);
 if(now >= len) H.ExecIfFunction(callback);
 };
 loadOne();
};

Usage example:

H.loadScripts(['/js/ace/ace.js','/js/ace/mode-json.js','/js/jquery-ace.js'],function(){
 // do something
});

Those function doesn't check if any of script loading is unsuccessful.