Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

async:false option not working in $.ajax() , is it depreciated in jQuery 1.8+ for all use cases?

Tags:

jquery

I'm confused about using the async: false option with $.ajax(). According to the $.ajax() documentation:

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

I don't know what jqXHR ($.Deferred) means. Is using async:false for any reason depreciated, or is jqXHR ($.Deferred) some sort of special use case?

I ask as I'm having trouble getting an $.ajax() call to happen asynchronously.This is with jQuery 1.8.2:

var ret = {};

$.ajax({
   async:           false,
    method:         'GET',
    contentType:    'application/json',
    dataType:       'jsonp',
    url:            '/couchDBserver',
    error:          myerr,
    success:        function(data) {

        var rows = data.rows;

        //something that takes a long time
        for(var row in rows) {
             ret[rows[row].key] = rows[row].value;
        }

        console.log('tick');
    }
});
console.log('tock');
console.log(JSON.stringify(ret))

My console output is:

tock
{}
tick

Am I doing something wrong, or am I doing something wrong?

like image 382
ddouglascarr Avatar asked Aug 16 '13 07:08

ddouglascarr


3 Answers

what it is saying is, if your request is async: false then you should not use ajax.done(), ajax.fail() etc methods to register the callback methods, instead you need to pass the callback methods using success/error/complete options to the ajax call

correct

$.ajax({
    async: false,
    success: function(){
    },
    error: function(){
    },
    complete: function(){
    }
})

wrong

$.ajax({
    async: false
}).done(function(){
}).fail(function(){
}).always(function(){
})

if async: true //not specified

correct

$.ajax({
}).done(function(){
}).fail(function(){
}).always(function(){
})

or

$.ajax({
    async: false,
    success: function(){
    },
    error: function(){
    },
    complete: function(){
    }
})
like image 78
Arun P Johny Avatar answered Oct 06 '22 00:10

Arun P Johny


You trying to use JSONP techinque with async:false at the same time. This is not possible. JSONP is actually creating a script element and appending it somewhere to the document, so it's not an XHR and jQuery can't pass the sync flag anywhere. Since you get data from the same origin, just change dataType to

dataType:       'json',

However, everyone can tell you that synchronous requests are not good they hang your browser. You should use them only in a small number of cases.

like image 27
Tommi Avatar answered Oct 06 '22 00:10

Tommi


The Deferred object in jQuery handles promises in AJAX. As it is, async: false would completely break the notion of asynchronous calls for which you need to handle promises.

What the jQuery doc snippet is telling you is that something like this would be prohibited.

$.ajax({
    async: false,
    /*rest of the options*/
}).done(function(){
    //do something after the response comes back successfully
});

However, attaching callback options is completely valid, and is the only way of using AJAX with async: false.

$.ajax({
    async: false,
    /*Rest of the options*/
    success: function(){
                console.log("foo");
             }
});
like image 31
Achrome Avatar answered Oct 06 '22 00:10

Achrome