jQuery.getScript()

jQuery

previous page next page

jQuery.getScript()

Categories: Ajax > Shorthand Methods

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] ) Returns: jqXHR

Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.

  • version added: 1.0jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )

    • url
      Type: String
      A string containing the URL to which the request is sent.
    • success(script, textStatus, jqXHR)
      Type: Function()
      A callback function that is executed if the request succeeds.

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.

1
 
                                

                                  

                                    $(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

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

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

Examples:

Example: Define a $.cachedScript() method that allows fetching a cached script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
                                  

                                    

                                      jQuery.cachedScript = function(url, options) {
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        // allow user to set any option except for dataType, cache, and url
                                    

                                  

                                  

                                    

                                        options = $.extend(options || {}, {
                                    

                                  

                                  

                                    

                                          dataType: "script",
                                    

                                  

                                  

                                    

                                          cache: true,
                                    

                                  

                                  

                                    

                                          url: url
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        // Use $.ajax() since it is more flexible than $.getScript
                                    

                                  

                                  

                                    

                                        // Return the jqXHR object so we can chain callbacks
                                    

                                  

                                  

                                    

                                        return jQuery.ajax(options);
                                    

                                  

                                  

                                    

                                      };
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        // Usage
                                      
                                    

                                  

                                  

                                    

                                      $.cachedScript("ajax/test.js").done(function(script, textStatus) {
                                    

                                  

                                  

                                    

                                        console.log( textStatus );
                                    

                                  

                                  

                                    

                                      });

Example: Load the official jQuery Color Animation plugin dynamically and bind some color animations to occur once the new functionality is loaded.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      .block {
                                    

                                  

                                  

                                    

                                         background-color: blue;
                                    

                                  

                                  

                                    

                                         width: 150px;
                                    

                                  

                                  

                                    

                                         height: 70px;
                                    

                                  

                                  

                                    

                                         margin: 10px;
                                    

                                  

                                  

                                    

                                      
                                        }
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      <button id="go">&raquo; Run</button>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <div class="block">
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      (function() {
                                    

                                  

                                  

                                    

                                        var url = "https://raw.github.com/jquery/jquery-color/master/jquery.color.js";
                                    

                                  

                                  

                                    

                                        $.getScript(url, function() {
                                    

                                  

                                  

                                    

                                          $("#go").click(function(){
                                    

                                  

                                  

                                    

                                            $(".block")
                                    

                                  

                                  

                                    

                                              .animate( { backgroundColor: "rgb(255, 180, 180)" }, 1000 )
                                    

                                  

                                  

                                    

                                              .delay(500)
                                    

                                  

                                  

                                    

                                              .animate( { backgroundColor: "olive" }, 1000 )
                                    

                                  

                                  

                                    

                                              .delay(500)
                                    

                                  

                                  

                                    

                                              .animate( { backgroundColor: "#00f" }, 1000 );
                                    

                                  

                                  

                                    

                                          });
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                      })();
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page