jquery-ui Dialog: Make a button in the dialog the

Question

In a jquery modal dialog, is there a way to select a button as the default action (action to execute when the user presses enter)?

Example of jquery web site: jquery dialog modal message

In the example above the dialog closes when the user presses Esc. I would like the "Ok" button action to be called when the user presses Enter.

Answer 1

This worked for me within the dialog using jquery 1.10.2

dialog({
    focus: function() {
        $(this).on("keyup", function(e) {
            if (e.keyCode === 13) {
                $(this).parent().find("button:eq(1)").trigger("click");
                return false;
            }
        });
    },

more options...

Answer 2

You should to use :tabbable selector and index of your button (0 is [X] button, yours started from 1)

open: function() {
    var tb = $(":tabbable", this.parentNode);
    if(tb.length>1) {
        tb[1].focus();
    }
}

Answer 3

try this way:

$("#myDialog").dialog({
    open: function() {
         $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 
    }
});

Answer 4

I'm using version 1.10.0. I could not get it to work with open but with focus. This focuses the second button:

focus: function(){
  $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}

Answer 5

I like this one (it is working for me), which leaves the focus where I wanted to be (a text box)

    $("#logonDialog").keydown(function (event) {
        if (event.keyCode == $.ui.keyCode.ENTER) {
            $(this).parent()
                   .find("button:eq(0)").trigger("click");
            return false;
        }
    });

However, this is working just for one button (Ok button), if needed ':eq(n)' could be set to select other button.

Note: I added a new line returning false to prevent event bubbling when the enter key is handled, I hope it helps better than before.

Answer 6

This simple piece of code styles your buttons and sets the default to the last one:

 open: function(){

      $buttonPane = $(this).next();
      $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary');
      $buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default');
      $buttonPane.find('button:last').focus();

  },