Question

I have a jQuery UI dialog:

$("#dialog").dialog({
    modal: true,
    closeOnEscape: false,
    resizable: false,
    autoOpen: false,
    open: function() {
        $(".ui-dialog-titlebar").hide();
    }
});

I am trying to open this dialog just before an AJAX call. It works using Firefox, but with IE it doesn’t open, unless I put an alert, just after I open the dialog. Can anyone tell me what the problem might be please? I am using the following code:

$("button").click(function() {
    $("#dialog").dialog('open');
    //alert('test'); //if I put this alert, the dialog will open
    $.ajax({
        type: "POST",
        url: "testing.txt",
        async: false,
        dataType: "text",
        success: function(returnText) {
            $("#dialog").dialog('close');
            $("#textarea").text(returnText);
        },
        error: function() {
            $("#dialog").dialog('close');
        }
    });
});

Answer 1

The open event completes asynchronously due to potential animations, therefore what is likely happening is that due to IE’s slow JavaScript interpretation, the code to close the dialog in the success or error callbacks (which are also asynchronous) are executing close enough to the open that you don’t notice dialog ever being opened. I’m going to guess that your AJAX call is completing very quickly.

One way around this it to put your AJAX call in a setTimeout block.

$("button").click(function() {
    $("#dialog").dialog('open');

    setTimeout(function() {
        $.ajax({
            type: "POST",
            url: "testing.txt",
            async: false,
            dataType: "text",
            success: function(returnText) {
                $("#dialog").dialog('close');
                $("#textarea").text(returnText);
            },
            error: function() {
                $("#dialog").dialog('close');
            }
        });
    }, 1);
});

This will simply queue up the $.ajax call which will allow the open event to complete. John Resig has a nice write up on why this sort of thing works here – http://ejohn.org/blog/how-javascript-timers-work/.