A repository of over 1000 quality jQuery plugins

jQuery jQuery.getScript()

Learn all about the jQuery function jQuery.getScript().

This is a shorthand Ajax function, which is equivalent to:

1
2
3
4
5
$.ajax({
url: url,
dataType: "script",
success: success
});

The script is executed in the global context, so it can refer to other variables and use jQuery functions. Included scripts can have some impact on the current page.

Success Callback

The callback is fired once the script has been loaded but not necessarily executed.

Scripts are included and run by referencing the file name:

1
2
3
4
5
6
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});

Handling Errors

As of jQuery 1.5, you may use .fail() to account for errors:

1
2
3
4
5
6
7
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});

Prior to jQuery 1.5, the global .ajaxError() callback event had to be used in order to handle $.getScript() errors:

1
2
3
4
5
$( "div.log" ).ajaxError(function( e, jqxhr, settings, exception ) {
if ( settings.dataType == "script" ) {
$( this ).text( "Triggered ajaxError handler." );
}
});

Caching Responses

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():

1
2
3
$.ajaxSetup({
cache: true
});

Alternatively, you could define a new method that uses the more flexible $.ajax() method.