bind the enter key to jquery dialog

[nelsonm]

hi all,

I want to have the submit button in a jquery dialog trigger when i press the enter key. I currently have the following that works:

// bind the enter key to the login dialog submit button. 
$('#login-window').keypress(function(event) { 
 if( event.keyCode == $.ui.keyCode.ENTER ) { 
 $(this).parent().find('.ui-dialog-buttonpane button:first').click(); 
 return false; 
 } 
});

however, i would have to replicate it for every dialog. So i'm trying this method that should work for all dialogs but i can't get it to work...

// bind the enter key to the workorder dialog submit button. 
$('.ui-dialog').keypress(function(event) { 
 if( event.keyCode == $.ui.keyCode.ENTER ) { 
 $(this).find('.ui-dialog-buttonpane button:first').click(); 
 return false; 
 } 
});

I know the problem is in the bolded selector segment but i don't know what's wrong with it. The following is the jquery html code segment (i removed some parts for clarity) i'm trying to reference in the selector...

<div class="ui-dialog"> 
 <div id="login-window" class="ui-dialog-content"> 
 <div class="ui-dialog-buttonpane"> 
 <div class="ui-dialog-buttonset"> 
  <button class="ui-button"> 
  <button class="ui-button"> 
 </div> 
 </div> 
 </div> 
</div>

I could use a little help, thanks.

[Fotiman]

Instead of using <button> elements, can you use <input type="submit">? If so, you should pick up ENTER keypress form submission automatically.

[daveVk]

$(this).closest('.ui-dialog').find('.ui-dialog-buttonpane button:first').click();

'this' is the element with focus ?

[nelsonm]

Fotiman,
Jquery generates the buttons as defined in the dialog definition.

daveVk,
I'm assuming the 'this' is '.ui-dialog'.

[daveVk]

I'm assuming the 'this' is '.ui-dialog'.

I am not sure that is the case, in first case you use

$(this).parent().find('.ui-dialog-buttonpane button:first').click();

why go to parent of ui-dialog ?

try alert( this.innerHTML );

[nelsonm]

daveVk,

My original selector for the click event

$(this).find('.ui-dialog-buttonpane button:first').click();

is ok although i rewrote it as:

$('.ui-dialog-buttonpane button:first', $(this)).click();

In any case, the actual problem, i discovered, is that the ".keypress" event assumes the selector it's bound to exists and is executed before all other scripts on the index page including the jquery dialog init scripts. So, putting the code segment in its own script and placing it after the jquery dialog init scripts fixes the problem.

However, i found the following script that works even if placed before the jquery dialog init scripts on the index page.

$('.ui-dialog').live('keyup', function(event) {  
if (event.keyCode === $.ui.keyCode.ENTER) {  
$('.ui-dialog-buttonpane button:first', $(this)).click();  
}  
});

It uses the ".live" event which has been deprecated.

I replaced the deprecated .live event with the recommended .on event handler.

$('.ui-dialog').on('keyup', function(event) {  
if (event.keyCode === $.ui.keyCode.ENTER) {  
$('.ui-dialog-buttonpane button:first', $(this)).click();  
}  
});

But it does not work.

The .on deumentation says...

If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

I altered the .on event to use delegated events...

$('body').on('keyup', '.ui-dialog', function(event) {  
if (event.keyCode === $.ui.keyCode.ENTER) {  
$('.ui-dialog-buttonpane button:first', $(this)).click();  
}  
});

It works!

I like the idea of not having to worry about script placement and be able to keep all of my miscellaneous init functions and methods at the top of the index page, but i also don't want to use deprecated code.

One last question...
Is the "return false;" really required in either my original .keypress or the .on scripts?

thanks.

[daveVk]

$(this).find('.ui-dialog-buttonpane button:first')

means find all specified buttons within 'this'

the rewrite

$('.ui-dialog-buttonpane button:first', $(this) )

means find all specified buttons within page + 'this'

"return false;" ensures that any action that would normally happen on pressing enter does not occur.

[nelsonm]

daveVK,

so based on your interpretation... i should be using...

$(this).find('.ui-dialog-buttonpane button:first').click();

because the syntax says find within "this" the first button within all ui-dialog-buttonpane classes.

instead of...

$('.ui-dialog-buttonpane button:first', $(this)).click();

because it's finding the first button within all ui-dialog-buttonpane classes and also find all "this" - which doesn't make too much sense but it works.

in

$('body').on('keyup', '.ui-dialog', function(event) {  
 if (event.keyCode === $.ui.keyCode.ENTER) {  
  $(this).find('.ui-dialog-buttonpane button:first').click(); 
 } 
});

Is there a more efficient way to lay out the selector?

[daveVk]

$(this).find('button:first').click() would suffice assuming there is no other buttons than shown (ie outside of buttonpane within ui-dialog).

Assuming the page content is static, the use of dynamic binding is not needed. Just make sure binding done after page load.

$(document).ready( function() {
... bind code here ...
});

api.jquery.com/ready/