jQuery UI dialog won't open in Internet Explorer

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');
        }
    });
});

TJ VanToll · Accepted Answer · 2012-07-12 10:28:09Z

4

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/.

answered Jul 12, 2012 at 10:28

TJ VanToll

12.7k5 gold badges46 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

duncanportelli Over a year ago

Thanks, that solved my problem!! I also, have a GIF animation in my popup, but it doesn't work. Do you know what this problem might be please?

TJ VanToll Over a year ago

There's no reason it shouldn't work. Can you look at the Network tab in Chrome's dev tools or the Net tab in Firebug to see if the image is being requested and returned correctly? It might be a problem of the image needing to be pre-fetched which you can do by calling new Image('path/to/myImage.png'); somewhere early in your JavaScript.

Kirk Olson · Accepted Answer · 2012-07-27 17:48:38Z

1

Another way to solve this problem is putting the "dialog.open" part in the mousedown event instead of click. That way you can still do stuff IE(8) doesn't like when you put it in a setTimeout, like downloading a file.

edited Jul 27, 2012 at 17:48

answered Jul 27, 2012 at 17:42

Kirk Olson

5649 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery UI dialog won't open in Internet Explorer

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related