AJAX call blocks displays of dialog

Question

I have a synch ajax call to some service.

I would like to first display a dialog (in my case it is an extjs window... but that is beside the point. The same problem happens with a simple alert(..) ).

Then immediately after showing the dialog I would like to call the ajax call, which takes about 30 seconds to complete. However, the dialog only shows after the ajax call has run to completion (ie in 30 seconds time). I have even tried to put it in a timeout, but that doesn't change anything.

Util.logInfo('1. before popup')

setTimeout(function(){alert("Hello")},1000); //some kind of GUI action

Util.logInfo('2. after popup')

var self = this;

var call = {}

call.url = url;
call.xmlHttpReq = $.ajax({
    url: 'somewebserviceURLthattakesaloooongtime',
    dataType: 'json',
    async: false,
    type: 'GET'
}).always(function (processedDataOrXHRWrapper, textStatus, xhrWrapperOrErrorThrown) {
    self.data = processedDataOrXHRWrapper;
});

Util.logInfo('3. after ajax')

Is this a particular problem with the jQuery ajax functionality, or am I missing something fundamental about how ajax works?

Coming from a Java background it is almost as if there is some kind of event-dispatch-thread activity going on.

Answer 1

Setting async: false will prevent further scripts from running (or entirely lock the website) until your ajax has finished

See more here What does "async: false" do in jQuery.ajax()?

From the documentation

[...] By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. [...]

Simply removing that line should fix your problem.