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