rich:tabPanel not working properly with rich:popuppanel when there is h:form in it
Hi
I've recently decided to migrate from Richfaces 3.3 to 4.5.
I have a xhtml page that contains a h:form. In this form , there is rich:tabpanel with rich:tab components.
There is a rich:popuppanel in the same page and I have a h:form inside this popuppanel.
When I want to switch between tabs, this following error occurs in the console of both firefox and chrome :
Uncaught Error: _AjaxResponse.replaceHtmlItem: item with identifier profileForm:j_id640112224_262767ca could not be foundjsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.replaceHtmlItemjsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.processUpdatejsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.processChangesjsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.processResponsejsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.responsejsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.singletonExtendClass.responsejsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass._stdOnSuccessjsf.js.jsf?ln=javax.faces:1 (anonymous function)jsf.js.jsf?ln=javax.faces:1 myfaces._impl.core._Runtime.extendClass.callbackjsf.js.jsf?ln=javax.faces:1 (anonymous function)
If I change the switch type attribute of rich:tabpanel to server, the problem will be solved but I don't want to the page to be refresh whenever I switch between tabs. This is the simplified version of source code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xxxx</title>
</h:head>
<f:view>
<h:body>
<h:outputStylesheet library="css" name="mainStyles.css" />
<h:form id="remForm">
<rich:tabPanel id="RemoteTabPanel" switchType="ajax"
tabClass="richTabHeadStyle" activeTabClass="richTabActiveStyle" activeItem="#{remoteDataBean.selectedTab}">
<a4j:ajax event="itemchange" listener="#{remoteDataBean.activateTab}" render="RemoteTabPanel" />
<rich:tab id="generalTabID" header="General">
General Tab
</rich:tab>
<rich:tab id="contactTabID" header="Contact Info">
Contact Tab
</rich:tab>
<rich:tab id="eventTabID" header="Events">
Event Tab
</rich:tab>
<rich:tab header="State History" id="xxxID" >
State Tab
</rich:tab>
</rich:tabPanel>
<a4j:commandButton id="remRefreshId" value="Refresh"
actionListener="#{remoteDataBean.refresh}"
image="/img/refreshRemote.png"
onclick="#{rich:component('showPanel')}.show()"
oncomplete="#{rich:component('showPanel')}.hide()"
alt="Refresh Configuration"
render="remoteDef,cardDefID">
</a4j:commandButton>
</h:form>
</h:body>
<rich:popupPanel id="changePasswordID" autosized="true" resizeable="false" modal="true">
<f:facet name="header">
<h:outputText value="Change Password:"
style="padding-right:15px;" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/img/close.png" id="hidelink112" >
<rich:componentControl target="changePasswordID"
operation="hide" event="click" />
</h:graphicImage>
</h:panelGroup>
</f:facet>
<h:form id="profileForm">
<h:panelGrid id="resetPasswordID" columns="2" rowClasses="resetPasswordStyle" columnClasses="cStyle,cStyle">
<h:column>
<h:outputText value="Old Password:"/>
</h:column>
<h:column>
<h:inputSecret id="oldpassAdd"
value="#{CurrentUser.oldpassword}"
required="true"
requiredMessage="Old Password must be entered correctly!"
validator="#{CurrentUser.validateOldPassword}">
<a4j:ajax event="blur" bypassUpdates="true" render="changeID"/>
</h:inputSecret>
</h:column>
<h:column>
<h:outputText value="New Password:">
</h:outputText>
</h:column>
<h:column>
<h:panelGrid columns="2">
<h:inputSecret id="passAdd"
required="true"
requiredMessage="New Password is Required!"
value="#{CurrentUser.newPassword}"
validator="#{userListBean.ValidatePasswordComplexity}"
validatorMessage="Password Field should be at least 12 Character !!!">
<f:validateLength minimum="12"/>
<f:attribute name="oldpasswordId" value="profileForm:oldpassAdd" />
<a4j:ajax event="blur" bypassUpdates="true" render="changeID"/>
</h:inputSecret>
<h:panelGroup>
<h:graphicImage id="passwordHintID"
url="/img/hint.png" width="16" height="16" />
<rich:tooltip for="passwordHintID">
<span>
<h:outputText value="12 Char-At Least One Lower Case Character-At Least One Numerical Character-At Least One Special Character!" />
</span>
</rich:tooltip>
</h:panelGroup>
</h:panelGrid>
</h:column>
<h:column>
<h:outputText value="Confirm New Password:"/>
</h:column>
<h:column>
<h:inputSecret id="repassadd"
value="#{CurrentUser.rePassword}"
validator="#{userListBean.validatePassword}">
<f:validateLength minimum="12"/>
<a4j:ajax event="blur" bypassUpdates="true" render="changeID"/>
<f:attribute name="passwordId" value="profileForm:passAdd" />
</h:inputSecret>
</h:column>
</h:panelGrid>
<br/>
<a4j:commandButton id="resetBtn" value="Change"
actionListener="#{CurrentUser.changePassword}"
styleClass="filterBtn" >
</a4j:commandButton>
<h:commandButton id="cancelBtn" value="Cancel"
onclick="#{rich:component('changePasswordID')}.hide()"
styleClass="filterBtn" >
</h:commandButton>
<br/>
<h:panelGroup id="changeID">
<rich:message for="oldpassAdd" styleClass="errorMessage"/>
<br/>
<rich:message for="passAdd" styleClass="errorMessage"/>
<br/>
<rich:message for="repassadd" styleClass="errorMessage"/>
</h:panelGroup>
</h:form>
</rich:popupPanel>
</f:view>
</html>
Thanks for Your Help
Masoud Dehghan
