0

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

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&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>
Myy
  • 18,107
  • 11
  • 37
  • 57
  • You haven't defined what element to attach the `keyup` event to. `$("j_idt11:pId")` means nothing to jQuery. You will need to tell it if that is a class, in which case it will be `$(".j_idt11:pId")` or an id, `$("#j_idt11:pId")`. The same goes for the button. Try changing it to the ID and see if it works. – sarcastyx Apr 10 '12 at 06:50
  • I tried $("#j_idt11:pId") but it doesn't work, on the contrary it breaks the Patientform. and it doesn't even reach teh alert(); – Myy Apr 12 '12 at 05:18
  • Could you possibly post the parsed HTML here for that form? – sarcastyx Apr 12 '12 at 08:05
  • what do you mean the parsed html.?? do you mean the second part of code I posted? thats the html – Myy Apr 13 '12 at 00:29
  • I just want to find out what the text box and the button id are in the HTML. When you render that form view the source and you should see something like `` for the patient id textbox and similar for the button except it will be ``. – sarcastyx Apr 13 '12 at 00:47
  • hey sarcastyx, I went ahead and added the rendered html. – Myy Apr 18 '12 at 03:03
  • I think I found the problem. When the page is rendered the html element ID has a `:` in the ID. You need to escape that using '\\'. Here is my simple example which shows the difference. http://jsfiddle.net/sarcastyx/wFpxm/1/ This SO answer will help you with it. http://stackoverflow.com/questions/7434215/jquery-selecting-an-id-with-a-colon-in-it. See if this works for you. – sarcastyx Apr 18 '12 at 04:39

1 Answers1

2

Please Try this code 

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

Hope this is helpful for you.

Rony SP
  • 2,618
  • 15
  • 16
  • 1
    I get this error The entity name must immediately follow the '&' in the entity reference. All I'm trying to do in the "stuff" part is I added an alert("something") just to make sure it's hitting that code. – Myy Apr 10 '12 at 16:46