richmodel panel is not closed when Esc (on keyboard) key is clicked.

[udaykiran pulipati]

I have problem while closing rich modelPanel.

I have two rich:modelPanel s in my page.
1. When I click on Head to Head button 'Start a Head to Head Rivalry' modelPanel is open. After open I click on Esc key on keyboard it is closed well
2. But in that I have a h inputtext for entering user after enter username, I click on 'StartRivalry' button in 'Start a Head to Head Rivalry' modelPanel then 'Create a Challenge' modelpanel is open. In this I click on Esc key the modelPanle is closed againg I click on Esc key on keyboard the 'Start a Head to Head Rivalry' stay on, it is not closed.


'Start a Head to Head Rivalry' modelPanel UI

<rich:modalPanel id="startrivalrypanel" width="645" height="325" resizeable="#{SignupBean.resize}">
		<f:facet name="header">
			<h:panelGroup>
				<table >
					<tr>
						<td></td>
					</tr>
				</table>
			</h:panelGroup>
		</f:facet>
		<f:facet name="controls">
			<h:graphicImage url="../../images/closeimg.png" style="cursor: pointer;height:30px; padding-top:1px;" onclick="Richfaces.hideModalPanel('startrivalrypanel');"></h:graphicImage>
		</f:facet>

		<a4j:form id="startrivalryForm">
			<table  >
				<tr>
					<td>
						<table >

							<tr >
								<td>
									<a4j:commandButton id="startrivalryHomeId" style="display:none" immediate="true"></a4j:commandButton>
								</td>
							</tr>
							<tr >
								<td  >
									<h:outputText value="Start a Head to Head Rivalry" styleClass="grayfont28px"></h:outputText>
								</td>
							</tr>
							<tr>
								<td   >
									<table>
										<tr>
											<td  >
												<a4j:outputPanel ajaxRendered="true">
													<h:outputText value="#{DraftZoneBean.startRivalryMessage}" styleClass="error"></h:outputText>
												</a4j:outputPanel>
											</td>
										</tr>
										<tr>
											<td>
												<h:outputText value="User :" styleClass="lblgray12px"></h:outputText>
											</td>
											<td ></td>
											<td >
												<h:inputText id="rivalname" style="width:254px; height:40px;padding-top:5px;" styleClass="lblgray12px" value="#{DraftZoneBean.rivalName}" binding="#{DraftZoneBean.rivalBindingName}" onclick="clickclear(this, 'Search for a User')"
													onblur="clickrecall(this,'Search for a User')"></h:inputText>
												<rich:suggestionbox zindex="3000" id="rivalnameSuggestion" for="rivalname" tokens="," suggestionAction="#{DraftZoneBean.rivalNameAutocomplete}" var="result" fetchValue="#{result.userName}" immediate="true" minChars="0" shadowOpacity="4" border="1" width="350"
													height="100" shadowDepth="5" cellpadding="2" nothingLabel="" usingSuggestObjects="true">
													<h:column>
														<h:outputText value="#{result.userName}" styleClass="normalFontClass" />
													</h:column>
													<h:column>
														<h:outputText value="#{result.email}" styleClass="normalFontClass" />
													</h:column>
													<a4j:support event="onselect">
														<f:setPropertyActionListener value="#{result}" target="#{DraftZoneBean.selectedUser}" />
													</a4j:support>
												</rich:suggestionbox>
											</td>
										</tr>
										<tr ></tr>
										<tr>
											<td>
												<h:outputText value="Message to User :" styleClass="lblgray12px"></h:outputText>
											</td>
											<td ></td>
											<td>
												<h:inputTextarea rows="4" cols="33" styleClass="textarea, lblgray12px" value="#{DraftZoneBean.userMessageToRival}" style="resize:none;"></h:inputTextarea>
											</td>
										</tr>
										<tr ></tr>
										<tr>
											<td  >
												<a4j:commandButton value="Start Rivalry" style="font-weight:bold; font-size:16px; height:30px; width:120px; cursor:pointer;" styleClass="squareBox" actionListener="#{DraftZoneBean.startRivalryAction}" immediate="true" reRender="rivalryChallengeForm">
												</a4j:commandButton>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<rich:hotKey key="esc" handler="Richfaces.hideModalPanel('startrivalrypanel');" disableInInput="false" />
		</a4j:form>
		<a4j:outputPanel ajaxRendered="true">
			<f:verbatim>${DraftZoneBean.tailScript}</f:verbatim>
			<f:verbatim>${DraftZoneBean.clearTailScript}</f:verbatim>
		</a4j:outputPanel>
	</rich:modalPanel>

'Create a Challenge' modelPanel UI

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<f:facet name="header">
	<h:panelGroup>
		<table >
			<tr>
				<td></td>
			</tr>
		</table>
	</h:panelGroup>
</f:facet>
<f:facet name="controls">
	<h:graphicImage url="../../images/closeimg.png" style="cursor: pointer;height:30px; padding-top:1px;" onclick="Richfaces.hideModalPanel('rivalryChallengepanel');"></h:graphicImage>
</f:facet>
<a4j:form id="rivalryChallengeForm">
	<table   border="0">
		<tr>
			<td>
				<table  border="0">
					<tr>
						<td ></td>
					</tr>
					<tr>
						<td >
							<h:outputText value="Create a Challenge" styleClass="grayfont28px"></h:outputText>
						</td>
					</tr>
					<tr class="content">
						<td >
							<table   border="0" >
								<tr ></tr>
								<tr>
									<td >
										<table   border="0" >
											<tr>
												<td >
													<a4j:outputPanel ajaxRendered="true">
														<h:outputText value="#{DraftZoneBean.rivalryChallengeMessage}" styleClass="error"></h:outputText>
													</a4j:outputPanel>
												</td>
											</tr>
										</table>
									</td>
								</tr>

								<tr>
									<td>
										<table >
											<tr>
												<td >
													<table border="0" >
														<tr>
															<td class="imgcreaterivalry" >
																<h:outputText value="Sport" styleClass="prisefontbold"></h:outputText>
															</td>
															<td>
																<table>
																	<tr>
																		<td>
																			<a4j:outputPanel ajaxRendered="true">
																				<h:selectOneRadio binding="#{DraftZoneBean.gameRadioid}" value="#{DraftZoneBean.defalutGameValue}" valueChangeListener="#{DraftZoneBean.challengeOptionSelection}" immediate="true" styleClass="lblgray16px">
																					<f:selectItems value="#{DraftZoneBean.gameRadioOptions}" />
																					<a4j:support event="onclick" reRender="sportStartTimeId"></a4j:support>
																				</h:selectOneRadio>
																			</a4j:outputPanel>
																		</td>
																	</tr>
																	<tr>
																		<td ></td>
																	</tr>
																	<tr>
																		<td>
																			<table border="0">
																				<tr>
																					<td>
																						<h:outputText value="Start Time :" styleClass="lblgray16px"></h:outputText>
																					</td>
																					<td ></td>
																					<td >
																						<a4j:outputPanel ajaxRendered="true">
																							<h:selectOneMenu id="sportStartTimeId" binding="#{DraftZoneBean.sportStartTimeId}" value="#{DraftZoneBean.defalutSportStartTimeValue}" style="width:150px" styleClass="ctrlfont">
																								<f:selectItems value="#{DraftZoneBean.sportStartTimeOptions}" />
																							</h:selectOneMenu>
																						</a4j:outputPanel>
																					</td>
																				</tr>
																			</table>
																		</td>

																	</tr>
																</table>

															</td>
														</tr>
													</table>
												</td>
											</tr>

											<tr>
												<td ></td>
											</tr>
											<tr>
												<td >
													<hr  />
												</td>
											</tr>
											<tr>
												<td ></td>
											</tr>
											<tr>
												<td >
													<table  border="0">
														<tr>
															<td class="imgcreaterivalry" >
																<h:outputText value="Type" styleClass="prisefontbold"></h:outputText>
															</td>
															<td>
																<a4j:outputPanel ajaxRendered="true">
																	<h:selectOneRadio binding="#{DraftZoneBean.challengeTypeRadioId}" value="#{DraftZoneBean.defalutCapeTypeValue}" immediate="true" styleClass="lblgray16px">
																		<f:selectItems value="#{DraftZoneBean.challengeTypeRadioOptions}" />
																		<a4j:support event="onclick" reRender="rivalryChallengeForm"></a4j:support>
																	</h:selectOneRadio>
																</a4j:outputPanel>
															</td>
														</tr>
													</table>
												</td>
											</tr>
											<tr>
												<td ></td>
											</tr>
											<tr>
												<td >
													<hr  />
												</td>
											</tr>
											<tr>
												<td ></td>
											</tr>
											<tr>
												<td >
													<table  border="0">
														<tr>
															<td class="imgcreaterivalry" >
																<h:outputText value="Wager" styleClass="prisefontbold"></h:outputText>
															</td>
															<td>
																<a4j:outputPanel ajaxRendered="true">
																	<h:selectOneRadio binding="#{DraftZoneBean.entryFeeRadioid}" value="#{DraftZoneBean.defalutEntryFeeValue}" styleClass="lblgray16px">
																		<f:selectItems value="#{DraftZoneBean.entryFeeRadioOptions}" />
																		<a4j:support event="onclick" reRender="rivalryChallengeForm"></a4j:support>
																	</h:selectOneRadio>
																</a4j:outputPanel>
															</td>
														</tr>
													</table>
												</td>
											</tr>
											<tr>
												<td ></td>
											</tr>
											<tr>
												<td >
													<hr  />
												</td>
											</tr>
											<tr>
												<td ></td>
											</tr>
											<tr>
												<td  >
													<a4j:outputPanel ajaxRendered="true">
														<a4j:commandButton value="Confirm" style="font-weight:bold; font-size:16px; height:30px; width:120px; cursor:pointer;" styleClass="squareBox" action="#{DraftZoneBean.confirmAction}" immediate="true" reRender="draftzoneForm">
														</a4j:commandButton>
													</a4j:outputPanel>
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<rich:hotKey key="esc" handler="Richfaces.hideModalPanel('rivalryChallengepanel');" disableInInput="false" />
	<a4j:outputPanel ajaxRendered="true">
		<f:verbatim>${DraftZoneBean.tailScript}</f:verbatim>
		<f:verbatim>${DraftZoneBean.clearTailScript}</f:verbatim>
	</a4j:outputPanel>
</a4j:form>

I have a problem while closing parent modelpanel after closing the child modelPanel in richfaces.
can anybody tell me how to solve this problem.
Thanks
udaykiran.

[Tim Holloway]

Welcome to the JavaRanch, UdayKiran!

I really don't know if RichFaces supports stacking modal panels. It may only allow one at a time. For something like that, you'd probably have to ask the RichFaces people directly. Assuming that they've changed the protections on their message boards enough that non-spammers can get in.