How to click on a certain button when I press the Enter key
Question
I'm building a webApp using JSF 2.0. I recently added a jQuery dialog box that has a cancel and an OK button, but no matter what I try to make it click the OK button when the Enter key is pressed I can't do it.
The javascript for the dialog box looks like this:
$("#goToPatientForm").dialog({
autoOpen: false,
height: 190,
width: 380,
modal: true,
resizable: false,
buttons: {
"Go": function() {
//CLICKS THE HIDDEN SAVE BUTTON SO IT CAN LOOK PRETTY.
//if(getMode()=="new"){
$('.goTo').click();
$(this).dialog( "close" );
},
Cancel: function() {
resetFormFields();
$(this).dialog( "close" );
}
},
close: function() {
resetFormFields();
//allFields.val("").removeClass("ui-state-error");
}
});
The dialog box looks like this:
<div id="goToPatientForm" title="Go To a Form">
<ul class="appnitro">
<li>
<h:outputLabel styleClass="description" for="pId">Patient Id: </h:outputLabel>
<div>
<h:inputText id="pId" value="#{dashboardBB.patientId}" size="30"></h:inputText>
</div>
</li>
<li style="visibility: hidden;">
<h:commandButton id="goToButton" action="#{dashboardBB.actionGoTo}" styleClass="goTo" value="Go" type="submit"></h:commandButton>
</li>
</ul>
</div>
As you can see I already gave the OK button a type="submit" and I've even added javascript to my page:
$("j_idt11:pId").keyup(function(event){
if(event.keyCode == 13){
alert("sometext");
$("j_idt11:goToButton").click();
}
});
But it doesn't work, It just reloads the page, but it doesn't hit the action for the button. Any ideas why it's not working like that? Thanks again in advance!
IMAGE:
EDIT: here's the rendered html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/miloWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=3.2"></script><script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&v=3.2"></script>
<title>MILO</title>
<link rel="stylesheet" type="text/css" href="/miloWeb/css/redmond/jquery-ui-1.8.11.custom.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/view.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/miloWeb/css/ezmark.css" media="screen" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.milo #content { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript" src="/miloWeb/js/jquery.ezmark.js"></script>
<script type="text/javascript" src="/miloWeb/js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="/miloWeb/js/random.js"></script>
<script type="text/javascript" src="/miloWeb/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").button();
});
function loading(){
$( "#loadingPopUp" ).dialog( "open" );
return false;
}
function unloading(){
$( "#loadingPopUp" ).dialog( "close" );
return false;
}
</script>
<script>
$(function() {
$("#dialog:ui-dialog").dialog("destroy");
$("#goToPatientForm").dialog({
autoOpen: false,
height: 190,
width: 380,
modal: true,
resizable: false,
buttons: {
"Go": function() {
//CLICKS THE HIDDEN SAVE BUTTON SO IT CAN LOOK PRETTY.
//if(getMode()=="new"){
$('.goTo').click();
$(this).dialog( "close" );
},
Cancel: function() {
resetFormFields();
$(this).dialog( "close" );
}
},
close: function() {
resetFormFields();
//allFields.val("").removeClass("ui-state-error");
}
});
$("#goToPopUp")
.click(function() {
$( "#goToPatientForm" ).dialog( "open" );
});
});
function resetFormFields(){
document.getElementById("j_idt11:pId").value = "";
}
</script></head><body class="milo">
<form id="j_idt11" name="j_idt11" method="post" action="/miloWeb/faces/pages/dashboard/dashboard.xhtml" class="miloForm" enctype="multipart/form-data">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div id="container">
<div id="header"><html xmlns="http://www.w3.org/1999/xhtml"><body>
<div>
<h1 class="headerTitle">MILO Chart</h1>
<div class="headerTreadmark">Medical Information Leading Operations Chart</div>
<div class="clear"></div>
</div>
<div id="headerInfo"><table>
<tbody>
<tr><td></td></tr></tbody>
</table>
</div><div id="j_idt11:j_idt42"></div><script id="j_idt11:j_idt42_s" type="text/javascript">PrimeFaces.cw('AjaxStatus','widget_j_idt11_j_idt42',{id:'j_idt11:j_idt42'});widget_j_idt11_j_idt42.bindCallback('ajaxStart',function(){loading();});widget_j_idt11_j_idt42.bindCallback('ajaxSuccess',function(){unloading();});</script></body>
</html>
</div>
<div id="sidebar1"><div>
<h3 style="margin-top: 40px;">Navigation</h3>
<div id="navigation">
<ul class="top-level">
<li>
<script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/jsf.js?ln=javax.faces"></script>
<a id="j_idt11:linkLogin" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkLogin':'j_idt11:linkLogin'},'');return false">Log Out</a></li>
<li><a id="j_idt11:linkDashboard" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkDashboard':'j_idt11:linkDashboard'},'');return false">Dashboard</a></li>
<li><a id="j_idt11:linkScheduler" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkScheduler':'j_idt11:linkScheduler'},'');return false">Scheduler</a></li>
<li>
<ul class="sub-level">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="sub-level">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<ul class="sub-level">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
<h3 style="margin-top: 40px;">Opened Encounter</h3>
<div id="navigation2">
<ul class="top-level">
<li></li>
<li></li>
<li>
<ul class="sub-level">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
<li>
<ul class="sub-level">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
</div>
</div>
</div>
<!-- end #sidebar1 -->
</div>
<br />
<br />
<div id="content">
<div id="goToPatientForm" title="Go To a Chart">
<ul class="appnitro">
<li><label for="j_idt11:pId" class="description">
Patient Id: </label>
<div><input id="j_idt11:pId" type="text" name="j_idt11:pId" size="30" />
</div>
</li>
<li style="visibility: hidden;"><input id="j_idt11:goToButton" type="submit" name="j_idt11:goToButton" value="Go" class="goTo" />
</li>
</ul>
<p class="validateTips">Type in the Patient Id of the chart you wish to open.</p>
</div>
<h2>Dashboard</h2>
<div>
<center>
<table cellspacing="0" cellpadding="3" width="520" style="position: relative; top: 100px;">
<tr>
<td align="center"><a id="j_idt11:linkLoginDash" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkLoginDash':'j_idt11:linkLoginDash'},'');return false"><img src="/miloWeb/images/schedulerIcon1.1.png" alt="Scheduler" /></a></td>
<td align="center"><a id="j_idt11:link2" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link2':'j_idt11:link2'},'');return false"><img src="/miloWeb/images/newIcon1.1.png" alt="New Patient" /></a></td>
<td align="center"><a id="j_idt11:link3" href="#" onclick="jsf.util.chain(this,event,'return false;','mojarra.jsfcljs(document.getElementById(\'j_idt11\'),{\'j_idt11:link3\':\'j_idt11:link3\'},\'\')');return false"><img src="/miloWeb/images/goToIcon1.1.png" alt="Go To Patient" id="goToPopUp" /></a></td>
<td align="center"><a id="j_idt11:link4" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link4':'j_idt11:link4'},'');return false"><img src="/miloWeb/images/searchIcon1.1.png" alt="Search screen" /></a></td>
<td align="center"><a id="j_idt11:link5" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link5':'j_idt11:link5'},'');return false"><img src="/miloWeb/images/settingsIcon1.2.png" alt="Settings" /></a></td>
</tr>
<tr>
<td align="center">Scheduler</td>
<td align="center">New</td>
<td align="center">Go To</td>
<td align="center">Search</td>
<td align="center">Settings</td>
</tr>
</table>
</center>
</div>
</div>
<br class="clear" />
<div id="footer"><div id="template_footer_id" style="text-align: center;">© 2012 Bravo Technologies.
</div>
</div>
</div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="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" autocomplete="off" />
</form></body>
</html>
1 answers
solution1
2 2012-04-10 06:47:23
Please Try this code
$('body').keyup(function(e) {
if ($('#goToPatientForm').is(':visible') && e.which == 13) {
//stuff
}
});
Hope this is helpful for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to click a button on Enter key press
how to trigger the button of the website when i press the enter key?
Perform Button click event when user press Enter key in Textbox
How to trigger button click when press enter key outside of input controls
How to press a button with Enter Key
How I can trigger a function with a button click which is already set to be triggered with "Enter" Key press in AngularJS?
How to prevent triggering button event when press 'enter' key and hold?
How to trigger another button when I press enter key inside my form
press enter key with a click?
How can I call a function when I press the enter key?
Related Tags