popupPanel Richfaces doesn't work

Question

I am working with RicheFaces, when i click to have popupPanel "Edit User Details" i don't get the form to Edit User Details.

Here is my code:

<ui:define name="title">

        <h:outputText value="Users Management" />
    </ui:define>
<!-- <h:outputText value="#{collaborateurBo.getAllCollaborateur().size()}" /> -->
    <ui:define name="content">
        <center>
            <a4j:status onstart="#{rich:component('statPane')}.show()"
                onstop="#{rich:component('statPane')}.hide()" />                
            <h:form id="form">
                <a4j:outputPanel id="tableaa" layout="block">
                    <rich:dataTable value="#{PosteBean.getCollaborateurList()}" var="pr" iterationStatusVar="it" id="table"rows="15">
                        <rich:column>
                            <f:facet name="header">#</f:facet> #{it.index} </rich:column>
                        <rich:column>
                    <f:facet name="header">Last name</f:facet>
                <h:outputText value="#{pr.getNom()}" /> 
                        </rich:column>
                        <rich:column>
                        <f:facet name="header">First name</f:facet>
                        <h:outputText value="#{pr.getPrenom()}" />
                        </rich:column>              
                    <rich:column>
            <a4j:commandLink styleClass="no-decor" execute="@this"render="@none"
            oncomplete="#{rich:component('confirmPane')}.show()">
        <h:graphicImage value="/css/images/delete.gif" alt="delete" />
    <a4j:param value="#{it.index}"
        assignTo="#{PosteBean.currentProjectIndex}" />
    <f:setPropertyActionListener target="#{PosteBean.Collaborateurr}"value="#{p}" />
                            </a4j:commandLink>
    <a4j:commandLink styleClass="no-decor" render="editGrid" execute="@this"
    oncomplete="#{rich:component('editPane')}.show()">
        <h:graphicImage value="/css/images/edit.gif" alt="edit" />

            <a4j:param value="#{it.index}"
                assignTo="#{PosteBean.currentProjectIndex}" />

    <f:setPropertyActionListener target="#{PosteBean.Collaborateurr}" value="#{p}" />
            </a4j:commandLink>                          
            </rich:column>                      
                     <f:facet name="footer">
            <rich:dataScroller id="scroller" />
             </f:facet>                     
                </rich:dataTable>
        <a4j:commandButton styleClass="no-decor" render="addGrid"
        oncomplete="#{rich:component('addPane1')}.show()"
                        value="Add new User">
                    </a4j:commandButton>                    
            </a4j:outputPanel>          
            <a4j:jsFunction name="remove" action="Collaborateurr.remove()"
                    render="tableaa" execute="@this"
                    oncomplete="#{rich:component('confirmPane')}.hide();" />            
            <rich:popupPanel id="statPane" autosized="true">
                    <h:graphicImage value="/css/images/ai.gif" alt="ai" />
            Please wait...
        </rich:popupPanel>       
        <rich:popupPanel id="confirmPane" autosized="true">
            Are you sure you want to delete the row?            
             <a4j:commandButton value="Cancel"
                        onclick="#{rich:component('confirmPane')}.hide(); return false;" />
                    <a4j:commandButton value="Delete" onclick="remove()" />
                </rich:popupPanel>              
        <rich:popupPanel header="Edit User Details" id="editPane"
                    domElementAttachment="parent" width="400" height="200">                 
                    <rich:graphValidator id="gvv">
                        <rich:messages for="gvv" />
                        <rich:messages globalOnly="true" />                     
<!--                        edit -->
                        <h:panelGrid columns="3" id="editGrid">
                            <h:outputText value="Last name" />
                            <h:inputText value="PosteBean.Collaborateurr" />
                            <h:panelGroup />
                            <h:outputText value="First name" />
                            <h:inputText value="" />
                            <h:panelGroup />
                            <h:outputText value="Email" />
                            <h:inputText value="" id="emaa" />
                            <rich:message for="emaa" />
                        </h:panelGrid>                      
                        <h:selectOneRadio id="koko" value="PosteBean.sflag">
                            <f:selectItem itemValue="ROLE_ADMIN" itemLabel="Manager" />
                            <f:selectItem itemValue="ROLE_USER" itemLabel="Tester" />
                        </h:selectOneRadio>                     
                        <a4j:commandButton value="Store" action="PosteBean.store"
                            render="table" execute="editPane"
                            oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />                      
                        <a4j:commandButton value="Cancel"
                            onclick="#{rich:component('editPane')}.hide(); return false;" />                            
                    </rich:graphValidator>
                </rich:popupPanel>          
            <rich:popupPanel header="Add User " id="addPane1"
                    domElementAttachment="parent" width="400" height="200">
                    <rich:graphValidator id="gv">
                        <rich:messages for="gv" />
                        <rich:messages globalOnly="true" />
                        <h:panelGrid columns="3" id="addGrid">
                            <h:outputText value="Last name" />
                            <h:inputText value="" />
                            <h:panelGroup />
                            <h:outputText value="First name" />
<!--                            <h:inputText value="#{PosteBean.Collaborateurr}" /> -->
                            <h:panelGroup />
                            <h:outputText value="Email" />
<!--                            <h:inputText value="#{PosteBean.Collaborateurr}" id="ema" /> -->
                            <rich:message for="ema" />
                        </h:panelGrid>                  
                        <h:selectOneRadio id="kokoo" value="#{PosteBean.sflag}">
                            <f:selectItem itemValue="ROLE_ADMIN" itemLabel="Manager" />
                            <f:selectItem itemValue="ROLE_USER" itemLabel="Tester" />

                        </h:selectOneRadio>

                        <a4j:commandButton value="Add" action="#{PosteBean.add}"
                            render="table" execute="addPane1"
                            oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('addPane1')}.hide();}" />

                        <a4j:commandButton value="Cancel"
                            onclick="#{rich:component('addPane1')}.hide(); return false;" />
                    </rich:graphValidator>

                </rich:popupPanel>  


        </h:form>

        </center>
    </ui:define>

</ui:composition>

Thanks in advance for helpping me, i wanna have the form of editing,

Answer 1

1) rich:popupPanel should be moved outside of existing h:form;
2) inside each rich:popupPanel should be added h:form .

Reason: Popup panel always had requirement either

1. to be placed outside forms and have one inside
or
2. to have domElementAttachment attribute to set properly.