homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
bind the enter key to jquery dialog
nelsonm

5+ Year Member



 
Msg#: 4465581 posted 7:10 pm on Jun 14, 2012 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4465581 posted 12:46 am on Jun 15, 2012 (gmt 0)

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

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4465581 posted 4:21 am on Jun 15, 2012 (gmt 0)

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

'this' is the element with focus ?

nelsonm

5+ Year Member



 
Msg#: 4465581 posted 1:54 pm on Jun 15, 2012 (gmt 0)

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

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

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4465581 posted 4:59 am on Jun 16, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4465581 posted 3:37 pm on Jun 16, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4465581 posted 9:07 am on Jun 17, 2012 (gmt 0)

$(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

5+ Year Member



 
Msg#: 4465581 posted 2:24 pm on Jun 26, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4465581 posted 1:02 am on Jun 27, 2012 (gmt 0)

$(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/

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved