0

JSF 2.0 を使用して webApp を構築しています。最近、キャンセルと OK ボタンがある jQuery ダイアログ ボックスを追加しましたが、Enter キーを押したときに [OK] ボタンをクリックしようとしても、できません。

ダイアログ ボックスの JavaScript は次のようになります。

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

ダイアログ ボックスは次のようになります。

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

ご覧のとおり、OK ボタンに type="submit" を指定し、ページに JavaScript を追加しました。

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

しかし、それは機能しません。ページをリロードするだけですが、ボタンのアクションにはヒットしません。なぜそのように機能しないのですか？よろしくお願いします！

画像：スクリーンショット

編集：これがレンダリングされた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>
4

1 に答える 1

2

このコードを試してください

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

これがお役に立てば幸いです。

于 2012-04-10T06:47:23.777 に答える