Triggering a click event on an AdfRichCommandButton via JavaScript

Question

Hi,
I have created a standard JAAS login page. To get it to work, I had to create a HTML <tt><form></tt> tag surrounded by a <tt><f:verbatim></tt> component. It works perfectly fine, except that there is no default button. In other words, it is not possible to submit the form by pressing enter. I'm looking for a way to add this functionality, I'll probably need to create som JavaScript, that usually would have been created by the <tt><af:form></tt> component.
This is how my page is defined now:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document title="Login" id="d1"
                 theme="dark">
      <f:facet name="metaContainer">
        <f:verbatim>
          <script type="text/javascript">
          // JavaScript goes here...
          </script>
        </f:verbatim>
      </f:facet>
      <af:showPopupBehavior popupId="p1" triggerType="load"/>
      <f:verbatim>&lt;form action="j_security_check" method="POST"&gt;</f:verbatim>
      <af:popup id="p1" contentDelivery="immediate">
        <af:panelWindow id="pw1" title="Login"
                        closeIconVisible="false">
          <af:panelFormLayout id="pfl1">
            <af:inputText label="User name:"
                          required="true" id="j_username">
              <af:clientListener type="keyPress" method="checkEnter"/>
            </af:inputText>
            <af:inputText label="Password:"
                          required="true" id="j_password" secret="true"
                          rows="1">
              <af:clientListener type="keyPress" method="checkEnter"/>
            </af:inputText>
            <af:panelLabelAndMessage label="" id="btnbr">
              <af:commandButton text="Login" id="lb"
                                accessKey="L"/>
            </af:panelLabelAndMessage>
          </af:panelFormLayout>
        </af:panelWindow>
      </af:popup>
      <f:verbatim>&lt;/form&gt;</f:verbatim>
    </af:document>
  </f:view>
</jsp:root>As you can see, I have added a <tt><af:clientListener></tt> to each of the inputs. I've created a little JavaScript function to detect if the enter key is pressed:
function checkEnter(e) {           
  var characterCode            
  e = event;
  characterCode = e.keyCode;     
  if(characterCode == 13){    
    document.forms[0].submit() 
    return false
  } else {
    return true
}This works on IE, but not on FireFox. And it has the disadvantage that the "Login" button doesn't get disabled as soon as Enter is pressed. I tried to replace the <tt>document.forms[0].submit()</tt> part by something like this:
comp = AdfPage.PAGE.findComponent('lb');
comp.click();But nothing happens. I searched the documentation, but I can't find a way to trigger a click event on a AdfRichCommandButton. Does anyone have an idea how I could accomplish that the Login button is clicked if the user presses enter?
Best regards,
Bart Kummel
Edited by: Bart Kummel on Oct 21, 2009 9:29 AM

Answer 1

Hi,
there might be problem with popup. for me this login page works (and without f:verbatim). but of course without popup effect and seems like validation also doesn't work:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
          xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document title="Login" id="d1"
                 theme="dark" initialFocusId="j_username">
      <f:facet name="metaContainer">
      </f:facet>
      <form action="j_security_check" method="POST">
        <af:panelStretchLayout id="psl1" startWidth="50px" endWidth="50px"
                               topHeight="50px" bottomHeight="50px">
          <f:facet name="bottom">
            <af:spacer width="10" height="10" id="spacer3"/>
          </f:facet>
          <f:facet name="center">
            <af:panelBox text="Login" id="pb1" showDisclosure="false"
                         inlineStyle="width:300px; height:150.0px;">
              <f:facet name="toolbar"/>
              <af:panelFormLayout id="pfl1">
                <af:inputText label="User name:" required="true"
                              id="j_username"/>
                <af:inputText label="Password:" required="true" id="j_password"
                              secret="true" rows="1"/>
                <af:panelLabelAndMessage label="" id="btnbr">
                  <af:commandButton text="Login" id="lb" accessKey="L"/>
                </af:panelLabelAndMessage>
              </af:panelFormLayout>
            </af:panelBox>
          </f:facet>
          <f:facet name="start">
            <af:spacer width="10" height="10" id="s1"/>
          </f:facet>
          <f:facet name="end">
            <af:spacer width="10" height="10" id="spacer2"/>
          </f:facet>
          <f:facet name="top">
            <af:spacer width="10" height="10" id="spacer1"/>
          </f:facet>
        </af:panelStretchLayout>
      </form>
    </af:document>
  </f:view>
</jsp:root>regards,
Branislav