Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

blockUI vs ajax with async option to false

I need to call a javascript function which returns the content of an ajax call.

In order to achieve this result I set async option to false in ajax call.

function ajaxQuery(){
    var content;
    $.ajax({
        url: "blabla.html,
        async: false,
        success: function(data){
            content =   data
        }
    });
    return content;
}

Unfortunately, setting async option to false make blockUI not working properly. During the query to the server, the browser is frozen with no message.

If I set async option to true the blockUI comes to work properly but my javascript function return the value undefined, probably because the ajax query is not finished.

How to solve this problem in javascript function to get the content of the ajax call making blockUI working?

Thanks,

Antonio

like image 590
antonjs Avatar asked May 15 '11 15:05

antonjs


People also ask

Is Ajax async false deprecated?

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() .

What is difference between async true and false in Ajax?

by default async is true. it means process will be continuing in jQuery ajax without wait of request. Async false means it will not go to next step untill the response will come. By default async is true process will be continuing in jQuery ajax without wait of request.

What is async false in Ajax?

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

Can AJAX be synchronous?

Ajax requests are Asynchronous by nature, but it can be set to Synchronous , thus, having the codes before it, execute first.


4 Answers

You can't.

Synchronous AJAX calls will completely freeze the browser and should be avoided at all costs; there is no way around that.

Instead, you should pass the value using a callback, the same way $.ajax does.

like image 76
SLaks Avatar answered Oct 09 '22 23:10

SLaks


Problem with this code is that data is passed to callback and so this part of code

return content;

will be excecuted some time before this one

success: function(data){
        content =   data
    }

this is cause of undefined return.

How to do then?

function contentParse(data){
    //do things with data received
}

$.ajax({
    url: "blabla.html",
    success: function(data){
        contentParse(data);
    }
});

At least this is how I do. Good luck.

like image 43
nagisa Avatar answered Oct 09 '22 22:10

nagisa


your problem is that you are returning content at the end; instead, modify the dom in the success callback you registered(or call a function that does). You probably want to register an error callback as well that does something if the server returns other than 200.

like image 35
hvgotcodes Avatar answered Oct 10 '22 00:10

hvgotcodes


show some status message of Loading... till the response is obtained.

like image 43
Amareswar Avatar answered Oct 09 '22 22:10

Amareswar