- jQuery.getScript()
- jQuery.getScript( url [, success ] ) Returns: jqXHR
- version added: 1.0 jQuery.getScript( url [, success ] )
- Success Callback
- Handling Errors
- Caching Responses
- Examples:
- Demo:
- Books
- jQuery.get()
- jQuery.get( url [, data ] [, success ] [, dataType ] ) Returns: jqXHR
- version added: 1.0 jQuery.get( url [, data ] [, success ] [, dataType ] )
- version added: 1.12-and-2.2 jQuery.get( [settings ] )
- The jqXHR Object
- jQuery get 'this' in a function referring to jQuery object
- Javascript Source Code
- Related
- Learn and Understand jQuery this “$(this)” Selector with Examples and Codes
- jQuery this – Click Example
- jQuery this – .each() example
- jQuery this – .append() example
- jQuery this – .focus() example
- jQuery this – .hover() example
jQuery.getScript()
jQuery.getScript( url [, success ] ) Returns: jqXHR
Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.
version added: 1.0 jQuery.getScript( url [, success ] )
This is a shorthand Ajax function, which is equivalent to:
$.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 and executed.
Scripts are included and run by referencing the file name:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr )console.log( data ); // Data returnedconsole.log( textStatus ); // Successconsole.log( jqxhr.status ); // 200console.log( "Load was performed." );>);
Handling Errors
As of jQuery 1.5, you may use .fail() to account for errors:
$.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:
$( "div.log" ).on( "ajaxError", function( e, jqxhr, settings, exception )if ( settings.dataType == "script" )$( this ).text( "Triggered ajaxError handler." );>> );
Prior to jQuery 3.5.0, unsuccessful HTTP responses with a script Content-Type were still executed.
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() :
Alternatively, you could define a new method that uses the more flexible $.ajax() method.
Examples:
Define a $.cachedScript() method that allows fetching a cached script:
jQuery.cachedScript = function( url, options )// Allow user to set any option except for dataType, cache, and urloptions = $.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 callbacksreturn jQuery.ajax( options );>;// Usage$.cachedScript( "ajax/test.js" ).done(function( script, textStatus )console.log( textStatus );>);
Load the official jQuery Color Animation plugin dynamically and bind some color animations to occur once the new functionality is loaded.
html>html lang="en">head>meta charset="utf-8">title>jQuery.getScript demo title>style>.blockbackground-color: blue;width: 150px;height: 70px;margin: 10px;>style>script src="https://code.jquery.com/jquery-3.7.0.js"> script>head>body>button id="go">» Run button>div class="block"> div>script>var url = "https://code.jquery.com/color/jquery.color-2.1.2.js";$.getScript( url, function( )$( "#go" ).on( "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>
Demo:
- Ajax
- Global Ajax Event Handlers
- Helper Functions
- Low-Level Interface
- Shorthand Methods
- Deprecated 1.3
- Deprecated 1.7
- Deprecated 1.8
- Deprecated 1.9
- Deprecated 1.10
- Deprecated 3.0
- Deprecated 3.2
- Deprecated 3.3
- Deprecated 3.4
- Deprecated 3.5
- Basics
- Custom
- Fading
- Sliding
- Browser Events
- Document Loading
- Event Handler Attachment
- Event Object
- Form Events
- Keyboard Events
- Mouse Events
- Class Attribute
- Copying
- DOM Insertion, Around
- DOM Insertion, Inside
- DOM Insertion, Outside
- DOM Removal
- DOM Replacement
- General Attributes
- Style Properties
- Collection Manipulation
- Data Storage
- DOM Element Methods
- Setup Methods
- Properties of jQuery Object Instances
- Properties of the Global jQuery Object
- Attribute
- Basic
- Basic Filter
- Child Filter
- Content Filter
- Form
- Hierarchy
- jQuery Extensions
- Visibility Filter
- Filtering
- Miscellaneous Traversing
- Tree Traversal
- Version 1.0
- Version 1.0.4
- Version 1.1
- Version 1.1.2
- Version 1.1.3
- Version 1.1.4
- Version 1.2
- Version 1.2.3
- Version 1.2.6
- Version 1.3
- Version 1.4
- Version 1.4.1
- Version 1.4.2
- Version 1.4.3
- Version 1.4.4
- Version 1.5
- Version 1.5.1
- Version 1.6
- Version 1.7
- Version 1.8
- Version 1.9
- Version 1.11 & 2.1
- Version 1.12 & 2.2
- Version 3.0
- Version 3.1
- Version 3.2
- Version 3.3
- Version 3.4
- Version 3.5
- Version 3.6
- Version 3.7
Books
Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath
jQuery.get()
jQuery.get( url [, data ] [, success ] [, dataType ] ) Returns: jqXHR
Description: Load data from the server using a HTTP GET request.
version added: 1.0 jQuery.get( url [, data ] [, success ] [, dataType ] )
A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder.
The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
version added: 1.12-and-2.2 jQuery.get( [settings ] )
A set of key/value pairs that configure the Ajax request. All properties except for url are optional. A default can be set for any option with $.ajaxSetup(). See jQuery.ajax( settings ) for a complete list of all settings. The type option will automatically be set to GET .
This is a shorthand Ajax function, which is equivalent to:
$.ajax(url: url,data: data,success: success,dataType: dataType>);The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.
As of jQuery 1.5, the success callback function is also passed a "jqXHR" object (in jQuery 1.4, it was passed the XMLHttpRequest object). However, since JSONP and cross-domain GET requests do not use XHR , in those cases the jqXHR and textStatus parameters passed to the success callback are undefined.
Most implementations will specify a success handler:
$.get( "ajax/test.html", function( data )$( ".result" ).html( data );alert( "Load was performed." );>);This example fetches the requested HTML snippet and inserts it on the page.
The jqXHR Object
As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.get() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The jqXHR.done() (for success), jqXHR.fail() (for error), and jqXHR.always() (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the jqXHR Object section of the $.ajax() documentation.
The Promise interface also allows jQuery's Ajax methods, including $.get() , to chain multiple .done() , .fail() , and .always() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.
jQuery get 'this' in a function referring to jQuery object
The following tutorial shows you how to do "jQuery get 'this' in a function referring to jQuery object".
The result is illustrated in the iframe.
You can check the full source code and open it in another tab using the links.
Javascript Source Code
The Javascript source code to do "jQuery get 'this' in a function referring to jQuery object" is
//sections.push($('#section' + p_sectionIndex)); sections = $.map($(".section"),function(obj)< return $(obj); >); this.showSection = function() < $(this).show(); >this.hideSection = function() < $(this).hide(); >sections[sections.length-1].on('show',this.showSection); sections[sections.length-1].on('hide',this.hideSection); sections[sections.length-1].trigger("show"); setTimeout(function()< sections[sections.length-1].trigger("hide"); >,2000)
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js" > !-- w w w . d em o 2 s. c o m --> body> div >"section" style="display: none;">section script type='text/javascript'> //sections.push($('#section' + p_sectionIndex)); sections = $.map($(".section"),function(obj)< return $(obj); >); this.showSection = function() < $(this).show(); >this.hideSection = function() < $(this).hide(); >sections[sections.length-1].on('show',this.showSection); sections[sections.length-1].on('hide',this.hideSection); sections[sections.length-1].trigger("show"); setTimeout(function()< sections[sections.length-1].trigger("hide"); >,2000)Related
- jQuery bring a jQuery object into a function
- jQuery bring a jQuery object into a function (Demo 2)
- jQuery create a jQuery function that returns another object
- jQuery get 'this' in a function referring to jQuery object
- jQuery map an object literal to be an instance of my constructor function
- jQuery pass a jquery object to function
- jQuery pass JS Object to jQuery function .queue()
demo2s.com | Email: | Demo Source and Support. All rights reserved.
Learn and Understand jQuery this “$(this)” Selector with Examples and Codes
The jQuery this selector is widely used and many times people get confuse to understand it fully. Therefore I decided to write this tutorial which explains the usage of $(this) selector with some easiest examples.
So whatever be the event/method – like click, hover, each, blur . You can refer to the DOM element with $(this) .
jQuery this – Click Example
I have some li tags. I can change the color of the li which is clicked. Here I will use the jQuery this selector to get my clicked li tag.
jQuery this – .each() example
Now I will use the jQuery this selector with .each() method. I will use change the color of elements having class called myclass .
jQuery this – .append() example
I have a button and on it’s click event I will append a text to it. I will use $(this) to append the text.
$("button").click(function () < $(this).append("the button") >);jQuery this – .focus() example
Here I have a textbox and on it’s focus event I will change its border using jQuery this selector.
The below code does this work:
$("input").focus(function () < $(this).css("border", "4px dashed yellow"); >); $(" input").blur(function () < $(this).css("border", "none"); >);jQuery this – .hover() example
Now I will explain how to use $(this) with jQuery hover event.
I have a span element. When mouse hovers over it the text-decoration is underline and when mouse moves away from it then text-decoration is changed to none.
Hover the mouse over me $("span").hover(function () < $(this).css("text-decoration", "underline"); >, function () < $(this).css("text-decoration", "none"); >);
