Rich Modal Panel not working
I have tried to use the Rich ModalPanel, and it works beautifully in Firefox, but not in IE7, Safari, or Chrome. Since the demos work in the alternate browsers, I'm assuming I'm doing something wrong. The use case is popping up a password-change dialog if the user is required to change her password. The page is fairly straightforward, and so I'm hoping someone can see whatever the error is. We're having the same problem on a couple pages, where a co-worker is experiencing the same problem. Our app uses jQuery, but the 'RichFacesInclude.js' line below removes the conflict with the prototype library. Thanks very much,
- Ray Clough
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:rp="urn://kamakuraco.com/jsf_tags" >
<ui:composition template="/WEB-INF/facelets/pages/layout/Template.xhtml" >
<ui:define name="otherHeadContents" >
<script src="#{BasePath}/scripts/RichFacesInclude.js" />
</ui:define>
<ui:define name="title">
Kamakura Risk Portal - User Login
</ui:define>
<!-- always need jsCookImports even if have no menu
<ui:define name="jsCookImports" /> -->
<ui:define name="modules" >
<div id="moduleBar" class="moduleBar" />
</ui:define>
<ui:define name="menu" />
<ui:define name="bodyContainer">
<a4j:form>
<fieldset class="loginPage borderColor"
style="width:400px; margin-left:auto;
margin-right:auto;
margin-top:10%; border: 1px solid;
font-size:10pt;" >
<div class="header"
style="padding-top: 2px; padding-bottom:2px;
font-size:12pt; text-align:center;
border: 1px solid #666666;" >
<rp:text key="login.pagetitle" />
</div>
<div class="errorPanel" >
<rich:messages globalOnly="true"
errorClass="errorMessages" warnClass="warningMessages"
infoClass="infoMessages" />
</div>
<div style="padding-left:2em; padding-bottom:3px;
font-size:10pt; font-weight:bold;" >
<rp:text key="login.prompt" />
</div>
<div >
<span class="paramLabel">
<rp:text key="login.input.username" />
</span>
<span class="paramValue" >
<h:inputText id="usrName"
style="width: 15em;"
value="#{credentials.username}" />
</span>
</div>
<div>
<span class="paramLabel" >
<rp:text key="login.input.password" />
</span>
<span class="paramValue" >
<h:inputSecret id="pword"
style="width: 15em;"
required="true"
value="#{credentials.password}" />
</span>
</div>
<div >
<a4j:commandButton id="loginButton"
style="border-right: #424242 solid;
border-bottom: #424242 solid;
border-left: #AAAAAA solid;
border-top: #AAAAAA solid;
font-size:10pt;
margin-left:13em;
margin-top:1em;
margin-bottom:1em;
float:left;"
action="#{authenticator.login}"
data="#{authenticator.pwordChangeRequired}"
value="#{rp:text('login.submitbutton.name')}"
oncomplete="conditionallyShowDialog('changePwPanel',data)"
reRender=":changePwPanel" />
</div>
</fieldset>
</a4j:form>
<rich:modalPanel id="changePwPanel" width="450" >
<f:facet name="header">Password Change Required</f:facet>
<h:form id="changePwForm" rendered="#{identity.loggedIn}">
<rich:messages globalOnly="true"
errorClass="errorMessages"
warnClass="warningMessages"
infoClass="infoMessages"
style="font-weight:bold; font-size:10pt; "/>
<fieldset>
<div>
<span class="paramLabel">Password: </span>
<span class="paramValue">
<h:inputText id="changedPword
value="#{changePasswordModel.pword}"
required="true" />
</span>
</div>
<div>
<span class="paramLabel">
Confirm Password: </span>
<span class="paramValue" >
<h:inputText id="changedPwordConfirm"
value="#{changePasswordModel.pwordConfirm}"
required="true" />
</span>
</div>
<div>
<span
style="margin-left:8em;
margin-top:1em; float:left; " >
<a4j:commandButton id="changePwButton"
value="Change Password"
action="{changePasswordModel.forceChangePasswordAction}" />
</span>
</div>
</fieldset>
</h:form>
</rich:modalPanel>
</ui:define>
</ui:composition>
</html>