blockUI vs ajax with async option to false

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

disable all other control untill one operation completes