Question

I have a web application where on the click of a button a bunch of work gets done on the server. This work is initiated by an ajax call and preceeding that call I display a jquery ui dialog that contains an animated gif to let the user know stuff is happening. Once the work is complete the ajax call returns and the dialog is closed. The problem I am having is that in IE 7/8 the dialog never opens. If I remove the code that closes the dialog from the callback then the dialog is displayed after the call completes which is not so helpful.

Here is the definition of my dialog:

$("#dgImporting").dialog({
    autoOpen: false,
    width: 250,
    height: 125,
    modal: true,
    resizable: false,
    position: 'center',
    closeOnEscape: false,
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

And here is the method I am using to execute my ajax call:

function executeImport(importData) {
importData.carriers = JSON.stringify(selectedCarriers);
$("#dgImporting").dialog("open");
$.ajax({
    type: "POST",
    traditional: true,
    url: "import/execute",
    async: false,
    data: JSON.stringify(importData),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        $("#dgImporting").dialog("close");
    }
});

The ajax call may take up to a minute to return but with this configuration I never see the dialog box. If I remove (“#dgImporting”).dialog(“close”); from the callback then I will see the dialog but not until after the ajax call completes, eventhough I call dialog(“open”) prior to making the ajax call.

In Firefox and Chrome this works as expected but I really need to make it work in IE. Any JavaScript gurus out there have any ideas what I can do?

Answer 1

Looks like it might be the async: false setting. From the documentation:

async Boolean

Default: true

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.

Try taking it out and testing again.