Submit jQuery UI dialog on <Enter>
I don't know if there's an option in the jQuery UI widget, but you could simply bind the keypress
event to the div that contains your dialog...
$('#DialogTag').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
//Close dialog and/or submit here...
}
});
This'll run no matter what element has the focus in your dialog, which may or may not be a good thing depending on what you want.
If you want to make this the default functionality, you can add this piece of code:
// jqueryui defaults
$.extend($.ui.dialog.prototype.options, {
create: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == $.ui.keyCode.ENTER ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
Here's a more detailed view of what it would look like:
$( "#dialog-form" ).dialog({
buttons: { … },
open: function() {
$("#dialog-form").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$(this).parent().find("button:eq(0)").trigger("click");
}
});
};
});
I have summed up the answers above & added important stuff
$(document).delegate('.ui-dialog', 'keyup', function(e) {
var target = e.target;
var tagName = target.tagName.toLowerCase();
tagName = (tagName === 'input' && target.type === 'button')
? 'button'
: tagName;
isClickableTag = tagName !== 'textarea' &&
tagName !== 'select' &&
tagName !== 'button';
if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
$(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');
return false;
}
});
Advantages:
- Disallow enter key on non compatible elements like
textarea
,select
,button
or inputs with type button , imagine user clicking enter ontextarea
and get the form submitted instead of getting new line! - The binding is done once , avoid using the dialog 'open' callback to bind enter key to avoid binding the same function again and again each time the dialog is 'open'ed
- Avoid changing existing code as some answers above suggest
- Use 'delegate' instead of the deprecated 'live' & avoid using the new 'on' method to allow working with older versions of jquery
- Because we use delegate , that mean the code above can be written even before initializing dialog. you can also put it in head tag even without
$(document).ready
- Also delegate will bind only one handler to
document
and will not bind handler to each dialog as in some code above , for more efficiency - Works even with dynamically generated dialogs like
$('<div><input type="text"/></div>').dialog({buttons: .});
- Worked with ie 7/8/9!
- Avoid using the slow selector
:first
- Avoid using hacks like in answers here to make a hidden submit button
Disadvantages:
- Run the first button as the default one , you can choose another button with
eq()
or call a function inside the if statement - All of dialogs will have same behavior you can filter it by making your selector more specific ie '#dialog' instead of
'.ui-dialog'
I know the question is old but I have had the same need, so, I shared the solution I've used.