1 Reply Latest reply on Mar 18, 2015 11:16 AM by Michal Petrov

    rich:tabPanel not working properly with rich:popuppanel when there is h:form in it

    Masoud Dehghan Newbie

      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