Why is it when I set "closeOnEscape" to false and then "closeOnEscape" to true jquery dialog escape does not work?

Question

Hi

I am using jquery ui 1.8 and I have a model dialog that popups up and if a user clicks on a checkbox another one comes up.

This requires them to say "yes" or "no" so I removed the "X" on the dialog and put closeOnEscape to false.

However I noticed when I did that the model dialog underneath it would close when they hit escape. So now when the one that pops up when the checkbox is checked I disable closeOnEscape on the first dialog box.

When they close it I enable again yet it does not work. I am not sure why

$("#Dialog").dialog( "option", "closeOnEscape", true);

I even do this in firebug. I just open my first dialog up

Do this in firebugs console

$("#Dialog").dialog( "option", "closeOnEscape", false);

Then verify that escape is now disabled. I then try to enable it again

$("#Dialog").dialog( "option", "closeOnEscape", true);

Yet it never enables.

Edit

Ok I figured it out it does work.... The thing is the user has to click on footer part of the dialog(where the buttons sit). This of course is not ideal since who is going to think of clicking on that area to get that to work?

Answer 1

You could try setting the focus back to the checkbox in the first dialog (or some tabbable element inside the dialog container).

Let's say the dialog that is opened when you click the checkbox -- the one with Yes/No -- has the id yesNoDialog. And let's say the checkbox in the first dialog (#Dialog, i guess) has the id theCheckbox. Then when you close yesNoDialog, you regain focus back to theCheckbox. Like this

$("#yesNoDialog").dialog({
    close: function() {
        $("#theCheckbox").focus();
    }
});

Here's a demo