5

My scenario:

  1. When a particular element in Dialog1 is clicked, Dialog2 opens.

  2. When you hit Escape to close Dialog2, works as expected and closes Dialog2.

  3. Dialog1 remains and you would think that it could be closed by hitting Escape again, but it doesn't. You have to first click on the dialog and then hit Escape for it to close.

Here's what I have tried, but to no avail:

// Array to hold all of our open dialogs id's
var openDialogs = [];

// the open: method in my dialog
open: function() {

    openDialogs[openDialogs.length] = $(this).attr("id");

}

// the close: method in my dialog
close: function() {

    var index = $.inArray($(this).attr("id"), openDialogs),
    $previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);          

    // set focus to previously opened dialog
    if ($previousDialog) { $previousDialog.focus(); }

    // I've even tried:
    //
    // if ($previousDialog) { $previousDialog.dialog("moveToTop"); }

}
1
  • I believe that @Andrew Whitaker posted the solution to your problem :)
    – Carls Jr.
    May 12, 2011 at 1:58

2 Answers 2

4

This line:

var index = $.inArray($(this).attr("id"), openDialogs),
$previousDialog = (index > 0) ? $("#" + openDialogs[index]) : undefined;

Will make $previousDialog refer to the current dialog (the one being closed). index is the index of the dialog that is being closed.

Therefore, later on this line:

if ($previousDialog) { $previousDialog.focus(); }

Is calling focus() on the dialog that was closed.

I believe what you want is something like this:

close: function() {
    var index = $.inArray($(this).attr("id"), openDialogs),
        $previousDialog = (index - 1 >= 0) ? $("#" + openDialogs[index - 1]) : undefined;

    // remove the current dialog from the array via Jon Resig's remove() method
    openDialogs.remove(index);

    // set focus to previously opened dialog
    if ($previousDialog) {
        $previousDialog.focus();
    }
}

Here's a working example: http://jsfiddle.net/L8J7Y/

I also noticed that if you use $previousDialog.dialog("widget").focus(); instead, you avoid getting the possibly annoying dotted line around the dialog.

4
  • That's embarrassing! Totally right. I just needed another pair of eyes. Thanks! Good tip on that .dialog("widget") too ... I've always wondered why it did that dotted line around the first input inside of the dialog when it was focused. May 12, 2011 at 2:34
  • Although, my (index > 0) is the same as (index - 1 >= 0), but I definitely forgot the index-1 when used in the array. May 12, 2011 at 2:40
  • Working example link: jsfiddle.net/L8J7Y is not working. I am on 17.0.963.46 beta-m. I had to close the $previousDialog and reopen it again to get the focus. I dont like it but i still have to go with it :(
    – user405398
    Feb 6, 2012 at 18:20
  • @kushakshigundu: what is the version number you're referencing? The example still works fine for me... Feb 6, 2012 at 18:29
0

how about in the close function you put this

 $(".ui-dialog-content").dialog("close");

as all dialogs have that class so it will close all dialogs

1
  • I don't want to close all dialogs immediately. I wanted the dialog that was previous to focus, so that IF someone hadn't touched anything and wanted to hit Escape at whatever time, it would close that previous dialog, that was now the current. Fyi, that's not really my full close function either. I left out code that wasn't pertinent to the question at hand. May 12, 2011 at 2:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.