Rich hotkey not working properly on modal panel
venuvanama Oct 2, 2009 3:06 PMHi,
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