Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery.ajax - always() not always running

Tags:

jquery

ajax

I'm using jQuery.ajax to make a REST call and retrieve some JSON. It's working as expected. However, when I force an error condition, such as an invalid URL, the always method does not fire. If I set crossDomain=false or dataType='json', then always does fire. But, I can't do that in my production code. If you set url='http://ip.jsontest.com/' then always fires. I created a small example to illustrate the problem:

var jqXHR = jQuery.ajax({
    type: 'GET',
    async: false,
    cache: false,
    url: 'http://ip.jsontest.com.BADURL/',
    contentType: 'application/json; charset=UTF-8',
    crossDomain: true,
    dataType: 'jsonp'
})
.done(function (data, textStatus, jqXHR) {
    console.log('Your IP is ' + data.ip);
    console.log('done was called');
})
.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('fail was called');
})
.always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) { console.log('always was called'); });

You can run this in the console at jquery.com which is using jQuery 1.9.1. I have the same behavior using jQuery 1.11.1. I need always to fire to handle times when the url is unavailable. I get the same behavior in IE11, Chrome 38 and FF 33. Am I doing something wrong or is this a bug? Thanks.

like image 735
Dwayne Driskill Avatar asked Nov 17 '14 19:11

Dwayne Driskill


People also ask

Is AJAX successful deprecated?

The parameter is not being deprecated, the success method is. You can continue using success: function re-read it carefully.

What is contentType in AJAX?

contentType is the type of data you're sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8 , which is the default. dataType is what you're expecting back from the server: json , html , text , etc.

Is AJAX obsolete?

AJAX is still relevant and very popular, but how you write it may change based on what libraries or frameworks are in the project. I almost never use the "raw" JavaScript way of writing it because jQuery makes it easier and is almost always already loaded into a project I'm working on.

What triggers AJAX success?

AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.

What is an Ajax event in jQuery?

As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event. An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type. (version added: 1.5)

What is the use of Ajax in jQuery?

Definition and Usage. The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.

What are the settings of a jQuery Ajax request?

See jQuery.ajax ( settings ) below for a complete list of all settings. A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup (). A set of key/value pairs that map a given dataType to its MIME type, which gets sent in the Accept request header.

What is the use of $Ajax with no arguments?

At its simplest, the $.ajax () function can be called with no arguments: Note: Default settings can be set globally by using the $.ajaxSetup () function. This example, using no options, loads the contents of the current page, but does nothing with the result.


1 Answers

This is something that is known for JSONP calls. According to the $.ajax reference for error:

Note: This handler is not called for cross-domain script and cross-domain JSONP requests.

Also note that synchronous JSONP calls are not supported:

Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.

Workarounds typically involve either 1) setting a timeout for the call or 2) using a plugin to add more typical error functionality.

1) Setting a timeout (and async true)

var jqXHR = jQuery.ajax({
    type: 'GET',
    async: true,
    cache: false,
    url: 'http://ip.jsontest.com.BADURL/',
    contentType: 'application/json; charset=UTF-8',
    crossDomain: true,
    dataType: 'jsonp',
    timeout: 2000
})
.fail(function (jqXHR, textStatus, errorThrown) {
    console.log('fail was called');
})
.done(function (data, textStatus, jqXHR) {
    console.log('Your IP is ' + data.ip);
    console.log('done was called');
})
.always(function (dataOrjqXHR, textStatus, jqXHRorErrorThrown) { console.log('always was called'); });

2) The jQuery JSONP plugin which adds error recovery features.

like image 155
davidmdem Avatar answered Sep 27 '22 16:09

davidmdem