8 Replies Latest reply on Oct 9, 2009 9:49 AM by Ilya Shaikovsky

    Rich hotkey not working properly on modal panel

    venuvanama Newbie

      Hi,

      I have a re-usable modal panel which I am including in several pages. I am using rich:hotkey to capture "return" key on the modal panel to avoid form submission when a user hits return. I am not sure where I am going wrong but the rich:hotkey is not working as it is supposed to.

      Can anyone please take a look at my code and let me know where and what am I doing wrong.

      Here is my parent form to which I am including a modal panel.

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:s="http://myfaces.apache.org/sandbox"
       xmlns:t="http://myfaces.apache.org/tomahawk"
       xmlns:c="http://java.sun.com/jstl/core">
      <body>
      
      
      <ui:composition template="/WEB-INF/layout/layout.xhtml">
       <ui:define name="title">
       Admin - Grouping
       </ui:define>
      
      
      
       <ui:define name="content">
       <a4j:region selfRendered="true">
       <h:form id="groupingForm" >
       <a4j:outputPanel ajaxRendered="true">
       <ui:include src="messages.xhtml"/>
       <h:messages errorClass="error"
       infoClass="info"
       globalOnly="true"
       layout="table"
       showSummary="true"
       showDetail="false"
       tooltip="true"
       style="width:100%" />
       </a4j:outputPanel>
       <div>
       <div style="font: 15pt/16pt Georgia, serif;color: #555753">
       <span>Groupings</span>
       <rich:spacer height="35px" />
       <a4j:status >
       <f:facet name="start">
       <h:graphicImage value="/images/loading.gif" />
       </f:facet>
       </a4j:status>
       </div>
      
       <rich:panel>
       <f:facet name="header">
       NAMS Groupings
       </f:facet>
       <rich:spacer width="1" height="5" />
       <h:panelGrid columns="3" styleClass="detail" columnClasses="label" >
       <h:outputLabel>
       <h:outputText value="Group Type" />
       </h:outputLabel>
       <h:selectOneMenu id="groupTypeList"
       value="#{groupingBean.selectedGroupType}"
       converter="#{groupTypeConverter}">
       <f:selectItems value="#{groupingBean.groupTypes}" />
       <a4j:support action="#{groupingBean.pickGroupType}" event="onchange"
       ajaxSingle="true"
       reRender="objectGroupList,contactsPanelGrid,groupPanelGrid,
       userGroupItemList,subTypePanelGrid,btnDelete,
       deviceGroupItemList,listUserResults,listDeviceResults,
       listAddressBlockResults,listBuildingResults" />
       </h:selectOneMenu>
       <h:message id="grpTypeError" for="groupTypeList" styleClass="errorMessage" />
      
       <h:outputLabel>
       <h:outputText value="Groups" />
       </h:outputLabel>
       <h:selectOneMenu id="objectGroupList"
       value="#{groupingBean.selectedGroup}"
       converter="#{groupConverter}">
       <f:selectItem itemValue="#{groupingBean.defaultGroup}"
       itemLabel="New" />
       <f:selectItems value="#{groupingBean.groups}" />
       <a4j:support action="#{groupingBean.select}" event="onchange"
       ajaxSingle="true"
       reRender="contactsPanelGrid,groupPanelGrid,subTypePanelGrid,
       userGroupItemList,deviceGroupItemList,btnDelete,
       listUserResults,listDeviceResults,listAddressBlockResults,
       listBuildingResults,grpChangeUser,grpChangeDate"/>
       </h:selectOneMenu>
       <h:message id="groupsError" for="objectGroupList" styleClass="errorMessage" />
       </h:panelGrid>
       <h:panelGrid columns="3" id="subTypePanelGrid" styleClass="detail" columnClasses="label" >
       <h:outputLabel>
       <h:outputText value="Sub Type" />
       <h:outputText style="color: #DD0707" value=" * "/>
       </h:outputLabel>
       <h:selectOneMenu id="subTypeList"
       value="#{groupingBean.selectedSubType}"
       required="true"
       disabled="#{securityBean.privMap['groupingFormSubTypeList']}" >
       <f:selectItem itemLabel="" itemValue="" />
       <f:selectItems value="#{groupingBean.subTypeList}" />
       </h:selectOneMenu>
       <h:message id="subTypeError" for="subTypeList" styleClass="errorMessage" />
       </h:panelGrid>
       <h:panelGrid columns="3" id="contactsPanelGrid" styleClass="detail" columnClasses="label" >
       <h:outputLabel>
       <h:outputText value="Contacts" />
       <h:outputText style="color: #DD0707" value=" * "/>
       </h:outputLabel>
       <h:panelGroup>
       <h:selectOneMenu id="contacts" value="#{groupingBean.selectedContact}" >
       <f:selectItems value="#{groupingBean.contacts}" />
       </h:selectOneMenu>
       <a4j:commandButton id="findContact" value="Manage Contacts"
       image="/images/contacts.gif" border="0"
       alt="Click here to Manage Contacts"
       ajaxSingle="true"
       disabled="#{securityBean.privMap['groupingFormFindContact']}" >
       <a4j:actionparam name="contact" value="contact"
       assignTo="#{contactBean.hiddenInput}" />
       <rich:componentControl for="contactSearchPanel"
       operation="show" event="onclick" />
       </a4j:commandButton>
       </h:panelGroup>
       <h:message id="contactsError" for="findContact" styleClass="errorMessage" />
       </h:panelGrid>
       </rich:panel>
      
       <rich:panel>
       <f:facet name="header">
       Group Details
       </f:facet>
      
       <rich:spacer width="1" height="5" />
      
       <h:panelGrid columns="3" id="groupPanelGrid" styleClass="detail" columnClasses="label" >
       <h:outputLabel>
       <h:outputText value="Name" />
       <h:outputText style="color: #DD0707" value=" * "/>
       </h:outputLabel>
       <h:inputText id="grpName"
       size="43"
       maxlength="40"
       required="true"
       binding="#{groupingBean.grpNameInputText}"
       value="#{groupingBean.selectedGroup.name}"
       disabled="#{securityBean.privMap['groupingFormGrpName']}" >
       </h:inputText>
       <h:message id="nameError" for="grpName" styleClass="errorMessage" />
      
       <h:outputLabel>
       <h:outputText value="Description" />
       <h:outputText style="color: #DD0707" value=" * "/>
       </h:outputLabel>
       <h:inputTextarea id="description"
       cols="40"
       rows="3"
       required="true"
       binding="#{groupingBean.grpDescriptionInputTextarea}"
       onkeypress="return chkFieldLength('groupingForm','description',100)"
       value="#{groupingBean.selectedGroup.description}"
       disabled="#{securityBean.privMap['groupingFormDescription']}" >
       </h:inputTextarea>
       <h:message id="descriptionError" for="description" styleClass="errorMessage" />
      
       <h:outputText value="Comments" />
       <h:inputTextarea id="comments"
       cols="40"
       rows="5"
       value="#{groupingBean.selectedGroup.comments}"
       onkeypress="return chkFieldLength('groupingForm','comments',4000)"
       disabled="#{securityBean.privMap['groupingFormComments']}" >
       </h:inputTextarea>
       <h:message id="commentsError" for="comments" styleClass="errorMessage" />
       </h:panelGrid>
       <h:panelGrid id="grpChangeUserPanelGrid" columns="2" styleClass="detail" columnClasses="label">
       <h:outputLabel for="changeUser">
       <h:outputText value="Change User" />
       </h:outputLabel>
       <h:outputText
       id="grpChangeUser"
       value="#{groupingBean.changeUser}" />
       </h:panelGrid>
       <h:panelGrid id="grpChangeDatePanelGrid" columns="2" styleClass="detail" columnClasses="label">
       <h:outputLabel for="changeDate">
       <h:outputText value="Change Date" />
       </h:outputLabel>
       <h:outputText
       id="grpChangeDate"
       value="#{groupingBean.changeDate}" />
       </h:panelGrid>
       </rich:panel>
      
       <rich:panel>
       <f:facet name="header">
       Grouped Values
       </f:facet>
      
       <a4j:outputPanel id="listUserResults" >
       <div style="width:100%;">
       <a4j:commandButton id="lookupUser" value="Manage Group"
       style="button" rendered="#{groupingBean.userGrp}"
       ajaxSingle="true"
       disabled="#{securityBean.privMap['groupingFormLookupUser']}" >
       <rich:componentControl for="userLookupSearchPanel"
       operation="show" event="onclick" />
       </a4j:commandButton>
       </div>
       <h:dataTable value="#{groupingBean.userGroupItems}" var="list"
       id="userGroupItemList" styleClass="list"
       rowClasses="odd,even" cellpadding="2" cellspacing="0"
       width="100%" border="0"
       rendered="#{groupingBean.userGrp}">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Name" />
       </f:facet>
       <h:outputText value="#{list.fullName}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Bemsid" />
       </f:facet>
       <h:outputLink
       value="http://card.web.boeing.com/webcard.cfm?id=#{list.namsEmployee.bemsid}"
       target="_blank">
       <h:outputText value="#{list.namsEmployee.bemsid}" />
       </h:outputLink>
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Phone" />
       </f:facet>
       <h:outputText value="#{list.namsEmployee.phone}" />
       </h:column>
       </h:dataTable>
       </a4j:outputPanel>
       <a4j:outputPanel id="listDeviceResults" >
       <div style="width:100%;">
       <a4j:commandButton id="lookupDevice" value="Manage Group"
       style="button" rendered="#{groupingBean.deviceGrp}"
       ajaxSingle="true"
       disabled="#{securityBean.privMap['groupingFormLookupDevice']}">
       <a4j:actionparam name="device" value="device"
       assignTo="#{deviceSearchUtilBean.hiddenInput}" />
       <rich:componentControl for="deviceLookupSearchPanel"
       operation="show" event="onclick" />
       </a4j:commandButton>
       </div>
       <h:dataTable value="#{groupingBean.deviceGroupItems}" var="list"
       id="deviceGroupItemList" styleClass="list"
       rowClasses="odd,even" cellpadding="2" cellspacing="0"
       width="100%" border="0"
       rendered="#{groupingBean.deviceGrp}">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Property Tag" />
       </f:facet>
       <h:outputText value="#{list.deviceSummaryView.tagNumber}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Primary Ip" />
       </f:facet>
       <h:outputText value="#{list.deviceSummaryView.ip}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Primary Name" />
       </f:facet>
       <h:outputText value="#{list.deviceSummaryView.name}" />
       </h:column>
       </h:dataTable>
       </a4j:outputPanel>
       <a4j:outputPanel id="listAddressBlockResults" >
       <div style="width:100%;">
       <a4j:commandButton id="lookupAddressBlock" value="Manage Group"
       style="button" rendered="#{groupingBean.addrBlockGrp}"
       ajaxSingle="true"
       disabled="#{securityBean.privMap['groupingFormLookupAddressBlock']}">
       <rich:componentControl for="addressBlockLookupSearchPanel"
       operation="show" event="onclick" />
       </a4j:commandButton>
       </div>
       <h:dataTable value="#{groupingBean.addrBlockGroupItems}" var="list"
       id="addressBlockGroupItemList" styleClass="list"
       rowClasses="odd,even" cellpadding="2" cellspacing="0"
       width="100%" border="0"
       rendered="#{groupingBean.addrBlockGrp}">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Start Address" />
       </f:facet>
       <h:outputText value="#{list.startAddr}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Mask" />
       </f:facet>
       <h:outputText value="#{list.mask}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Namespace" />
       </f:facet>
       <h:outputText value="#{list.namespace}" />
       </h:column>
       </h:dataTable>
       </a4j:outputPanel>
       <a4j:outputPanel id="listBuildingResults" >
       <div style="width:100%;">
       <a4j:commandButton id="lookupBuilding" value="Manage Group"
       style="button" rendered="#{groupingBean.locationGrp}"
       ajaxSingle="true"
       disabled="#{securityBean.privMap['groupingFormLookupBuilding']}">
       <rich:componentControl for="buildingLookupSearchPanel"
       operation="show" event="onclick" />
       </a4j:commandButton>
       </div>
       <h:dataTable value="#{groupingBean.buildingGroupItems}" var="list"
       id="bldgItemList" styleClass="list"
       rowClasses="odd,even" cellpadding="2" cellspacing="0"
       width="100%" border="0"
       rendered="#{groupingBean.locationGrp}">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Building" />
       </f:facet>
       <h:outputText value="#{list.namsBuilding.building}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="City" />
       </f:facet>
       <h:outputText value="#{list.namsBuilding.city}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Country" />
       </f:facet>
       <h:outputText value="#{list.namsBuilding.country}" />
       </h:column>
       </h:dataTable>
       </a4j:outputPanel>
       <rich:spacer width="1" height="5" />
       </rich:panel>
      
       <div><h:panelGroup styleClass="buttonBar" >
       <h:commandButton id="btnSave" value="Save"
       action="#{groupingBean.update}"
       styleClass="button"
       disabled="#{securityBean.privMap['groupingFormBtnSave']}" />
       <h:commandButton id="btnDelete" value="Delete"
       action="#{groupingBean.deleteGroup}"
       disabled="#{groupingBean.deleteBtnMode}"
       onclick="return confirmDelete('groupingForm','grpName');"
       styleClass="button" />
       </h:panelGroup></div>
       </div>
      
       </h:form>
      
       <a4j:include id="contactsInclude" viewId="contactsPopUp.xhtml" />
       <a4j:include viewId="namsUserLookup.xhtml" />
       <a4j:include viewId="deviceSearchUtilForm.xhtml" />
       <a4j:include viewId="addressBlockSearchUtilForm.xhtml" />
       <a4j:include viewId="namsBuildingLookup.xhtml" />
       </a4j:region>
      </ui:define>
      </ui:composition>
      </body>
      </html>
      
      Here is my modal panel code where I am using rich:hotKey
      
      <f:subview id="contactsPopUpSubview" xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:s="http://myfaces.apache.org/sandbox"
       xmlns:t="http://myfaces.apache.org/tomahawk"
       xmlns:c="http://java.sun.com/jstl/core">
      
       <a4j:region selfRendered="true">
       <rich:modalPanel id="contactSearchPanel"
       width="650"
       height="550"
       style="overflow:auto!important">
       <f:facet name="header">
       <h:outputText value="Manage Contacts" />
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup id="group" >
       <h:graphicImage value="/images/close.png" style="cursor:pointer" id="hidelink" />
       <rich:componentControl for="contactSearchPanel" attachTo="hidelink" operation="hide"
       event="onclick" />
       </h:panelGroup>
       </f:facet>
       <a4j:form id="contactSearchForm">
       <div>
       <div style="font: 15pt/16pt Georgia, serif;color: #555753">
       <span>NAMS Contact Management</span>
       <rich:spacer height="35px" />
       <a4j:status >
       <f:facet name="start">
       <h:graphicImage value="/images/loading.gif" />
       </f:facet>
       </a4j:status>
       </div>
      
       <a4j:outputPanel id="contactSearchOutputPanel" ajaxRendered="true" >
       <rich:dataTable value="#{contactBean.objectContacts}" var="list" id="contactList"
       styleClass="list" rowClasses="odd,even" cellpadding="2" cellspacing="0" width="100%">
       <h:column>
       <f:facet name="header">
       <h:outputText value="Name" />
       </f:facet>
       <h:outputText value="#{list.fullName}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Bemsid" />
       </f:facet>
       <h:outputLink
       value="http://card.web.boeing.com/webcard.cfm?id=#{list.namsEmployee.bemsid}"
       target="_blank">
       <h:outputText value="#{list.namsEmployee.bemsid}" />
       </h:outputLink>
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Phone" />
       </f:facet>
       <h:outputText value="#{list.namsEmployee.phone}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Bars Group" />
       </f:facet>
       <h:outputText value="#{list.namsBars.groupName}" />
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Nams Group" />
       </f:facet>
       <h:outputText value="#{list.grouping.name}" />
       </h:column>
       <h:column>
       <a4j:commandButton id="delete" value="Remove" styleClass="button"
       actionListener="#{contactBean.processRowValidation}" event="oncomplete" />
       </h:column>
       </rich:dataTable>
       </a4j:outputPanel>
       <rich:spacer height="20px" />
       <div style="width:100%;">
       <a4j:commandButton id="saveBtn"
       value="Save"
       style="float:left"
       styleClass="button"
       actionListener="#{contactBean.applyChanges}"
       ajaxSingle="true"
       reRender="contacts,searchStr,contSearchResults,deviceContacts,
       createFqdnContacts,updateFqdnContacts,createAliasFqdnContacts,
       updateAliasFqdnContacts">
       <rich:componentControl for="contactSearchPanel"
       operation="hide" event="onclick" />
       </a4j:commandButton>
       </div>
       <rich:spacer height="30px" />
       <div style="font: 15pt/16pt Georgia, serif; color: #555753">NAMS Contact Search</div>
       <h:panelGrid columns="5" styleClass="detail" columnClasses="label">
       <h:outputText value="Search In" />
       <h:selectOneMenu id="contType" value="#{contactBean.selectedContactType}">
       <f:selectItems value="#{contactBean.contactTypeList}" />
       <a4j:support action="#{contactBean.pickContactType}" event="onchange"
       reRender="searchHelp,contSearchResults,searchStr" />
       </h:selectOneMenu>
       <h:outputLabel for="searchStr">
       <h:outputText value="Search For" />
       </h:outputLabel>
       <h:inputText id="searchStr" size="25" value="#{contactBean.searchStr}" >
       <a4j:support event="onkeyup"
       ajaxSingle="true"
       onsubmit="if (event.keyCode != 13) { return false}"
       reRender="contSearchResults,noResultsFound">
       </a4j:support>
       </h:inputText>
      
       <a4j:commandButton id="searchBtn"
       value="Search"
       styleClass="button"
       event="oncomplete"
       reRender="contSearchResults,noResultsFound" />
       </h:panelGrid>
       <h:panelGrid columns="2" id="searchHelp" width="100%">
       <h:outputText id="helpText" value="" />
       <h:outputLabel for="helpText" rendered="#{contactBean.bluesFlag}">
       <h:outputText style="color: #DD0707"
       value="Search by BEMSID or lastname or lastname,firstname"
       rendered="#{contactBean.bluesFlag}" />
       </h:outputLabel>
       <h:outputLabel for="helpText" rendered="#{contactBean.barsFlag}">
       <h:outputText style="color: #DD0707" value="Search by BARS group name "
       rendered="#{contactBean.barsFlag}" />
       </h:outputLabel>
       <h:outputLabel for="helpText" rendered="#{contactBean.nugFlag}">
       <h:outputText style="color: #DD0707" value="Search by NAMS user group name "
       rendered="#{contactBean.nugFlag}" />
       </h:outputLabel>
       </h:panelGrid>
      
       <rich:dataTable value="#{contactBean.contactSearchList}" var="searchList"
       id="contSearchResults" styleClass="list" rowClasses="odd,even" cellpadding="0" cellspacing="0"
       width="100%" >
       <rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip" for="nameColumn">
       <span style="white-space:nowrap">Double-click to select value</span>
       </rich:toolTip>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Select" />
       </f:facet>
       <h:selectBooleanCheckbox id="selectCont" value="#{searchList.selected}" />
       </rich:column>
       <rich:column id="nameColumn">
       <f:facet name="header">
       <h:outputText value="Name" />
       </f:facet>
       <h:outputText value="#{searchList.fullName}" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="BemsId" />
       </f:facet>
       <h:outputLink
       value="http://card.web.boeing.com/webcard.cfm?id=#{searchList.namsEmployee.bemsid}"
       target="_blank">
       <h:outputText value="#{searchList.namsEmployee.bemsid}" />
       </h:outputLink>
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Phone" />
       </f:facet>
       <h:outputText value="#{searchList.namsEmployee.phone}" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Bars Group" />
       </f:facet>
       <h:outputText value="#{searchList.namsBars.groupName}" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Nams Group" />
       </f:facet>
       <h:outputText value="#{searchList.grouping.name}" />
       </rich:column>
       <a4j:support event="onRowDblClick" actionListener="#{contactBean.addSelectedItems}"
       reRender="contactList" />
       </rich:dataTable>
       <h:panelGrid columns="2" id="noResultsFound" width="100%">
       <h:outputLabel id="noResultsFound1" rendered="#{not contactBean.searchResultSet}">
       <h:outputText style="color: #DD0707" value="No Records Found"/>
       </h:outputLabel>
       </h:panelGrid>
       <div style="width:100%;">
       <a4j:commandButton id="addBtn"
       value="Add Contact"
       style="float:right"
       styleClass="button"
       actionListener="#{contactBean.addSelectedItems}"
       event="oncomplete"
       reRender="contactList" />
       </div>
       </div>
       <rich:hotKey key="return" handler="#{rich:element('searchBtn')}.click()"/>
       </a4j:form>
       </rich:modalPanel>
       </a4j:region>
      </f:subview>



      I would appreciate any help in resolving this issue.

      Thanks,

      Venu