commandButton Richfaces doesn't work - spring

Question

I am working with RicheFaces, when i click on commandButton "Add new User" i don't get the form to add new user.
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 want the button to give me the form,

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.