Enterキーを押したときに特定のボタンをクリックする方法

JSF 2.0を使用してWebアプリケーションを構築しています。私は最近、キャンセルとOKボタンを持つjQueryダイアログボックスを追加しましたが、Enterキーが押されたときにOKボタンをクリックしようとしても、できません。Enterキーを押したときに特定のボタンをクリックする方法

ダイアログボックスのJavascriptを次のようになります。あなたは私はすでにOKボタンを= "提出タイプを与え見ることができるように

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

：

$("#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");   
      } 
     });

ダイアログボックスは次のようになります「そして私も自分のページにJavaScriptを追加しました：

$("j_idt11:pId").keyup(function(event){  
      if(event.keyCode == 13){  
       alert("sometext"); 
       $("j_idt11:goToButton").click();  
       } 
      });

しかし、それは動作しません、それはちょうどページを再読み込みしますしかし、ボタンのアクションには当たらない。なぜそれがそれのように動作していない任意のアイデアですか？もう一度おねがいします！

IMAGE： Screenshot

編集：ここにレンダリングされた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&amp;v=3.2"></script><script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;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;">&copy; 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>

出典

2012-04-10 Myy

あなたは 'keyup'イベントを添付する要素を定義していません。 '$（" j_idt11：pId "）'はjQueryに何も意味しません。もしそれがクラスであればそれを伝える必要があります。その場合、 '$（" .j_idt11：pId "）'またはid、 '$（"＃j_idt11：pId "）'になります。同じことがボタンにも当てはまります。それをIDに変更して、それが機能するかどうか確認してください。 – sarcastyx

私は$（ "＃j_idt11：pId"）を試しましたが、うまくいかず、逆にPatientformが壊れます。それは警告にも届かない（）; – Myy

ここで、そのフォームの解析済みHTMLを投稿することはできますか？ – sarcastyx

だ

$('body').keyup(function(e) { 
    if ($('#goToPatientForm').is(':visible') && e.which == 13) { 
     //stuff 
    } 
});

このコードを試してみてください、これはあなたのために有用であると思います。

出典

2012-04-10 06:47:23

このエラーが発生するエンティティ名は、エンティティ参照の '＆'の直後に指定する必要があります。私が「もの」の部分でやろうとしているのは、そのコードに当たっているかどうかを確認するためだけに警告（「何か」）を追加することです。 – Myy

それは私のために働く。 –

Enterキーを押したときに特定のボタンをクリックする方法

答えて

関連する問題