Multiple rich:popup on a page not working RichFace 4.2.2 and 4.3.1

[bhlope]

I have a page with three rich:popup for CRUD operations (the read is handled by the rich:dataTable):

The sessionBean is a session scoped bean

The ItemAction class is a request scoped bean, each of the CUD method set the done flag to true if there were no errors.

The problem I'm facing is that when I first select the Add Item Popup, the other Popups do not display correctly. Either they don't display

the values (tcpdump shows that the values are there on the response) or the Delete Popup doesn't display any fields including the lables.

If I selected the delete or edit popups first, then all popups work as expected. Did anyone else experience this issue?

Here's the JSF page:

<h:form>

<rich:dataTable value=#{sessionbean.list} var="variable" id="tableId">

     <h:column>

          <f:facet name="header">

               <h:outputText value="Header"/>

          </f:facet>

     </h:column>

     <h:column>

          <a4j:commandLink onclick="#{rich:component('delPopup')}.show()" render="delPopupPanel">

               <h:graphicImage url="/resources/images/delete.png" style="border: none"/>

               <f:setePropertyActionListener value="#{variable}" target="#{sessionBean.selectedItem}"/>

          </a4j:commandLink>

          <a4j:commandLink onclick="#{rich:component('editPopup')}.show()" render="editPopupPanel">

               <h:graphicImage url="/resources/images/edit.png" style="border: none"/>

               <f:setePropertyActionListener value="#{variable}" target="#{sessionBean.selectedItem}"/>

          </a4j:commandLink>

     </h:column>

</rich:dataTable>

<a4j:commandButton value="Add" onclick="#{rich:component('addPopup')}.show()" render="addPopup"/>

</h:form>

<rich:popupPanel id="addPopup" autosize="true">

     <f:facet name="header">

          <h:outputText value="Add Item"/>

     </f:facet>

     <f:facet name="controls">

          <h:ouputLink value="#" onclick="#{rich:component('addPopup')}.hide(); return false;}">

               <h:graphicImage url="/resources/images/close.png" stype="border:none"/>

          </h:outputLink>

     </f:facet>

     <h:form>

          <rich:panel id="addItemsPanel">

               <rich:messages globalOnly="true"/>

          <h:panelGrid columns="3" rendered="#{!itemAction.done}">

               <h:outputLabel for="newName" value="Firstname"/>

               <h:inputText id="newName" value="itemAction.firstName" required="true" requiredMessage="Firstname is required"/>

               <rich:message for="newName"/>

                       <h:outputLabel for="newLastName" value="Last Name"/>

               <h:inputText id="newLastName" value="itemAction.lastName" required="true" requiredMessage="Last Name is required"/>

                      <rich:message for="newLastName"/>

                      <a4j:commandButton value="Cancel" onclick="#{rich:component('addPopup')}.hide();" render="tableId"/>

               <h:outputText value="Added Item"/>

               <a4j:commandButton value="add" action="#{itemAction.addItem()}" render="addItemsPanel'/>

          </h:panelGrid>

          <h:panelGrid column="1" rendered="#{itemAction.done}">

               <h:outputText value="Added Item"/>

               <a4j:commandButton value="Close" onclick="#{rich:component('addPopup')}.hide();" render="tableId"/>

          </h:panelGrid>

   </rich:panel>

     </h:form>

</rich:popupPanel>

<rich:popupPanel id="editPopup" autosize="true">

     <f:facet name="header">

          <h:outputText value="Edit Item"/>

     </f:facet>

     <f:facet name="controls">

          <h:ouputLink value="#" onclick="#{rich:component('editPopup')}.hide(); return false;}">

               <h:graphicImage url="/resources/images/close.png" stype="border:none"/>

          </h:outputLink>

     </f:facet>

     <h:form>

          <rich:panel id="editItemsPanel">

               <rich:messages globalOnly="true"/>

          <h:panelGrid columns="3" rendered="#{!itemAction.done}">

               <h:outputLabel for="editName" value="Firstname"/>

               <h:inputText id="editName" value="sessionBean.selectedItem.firstName" required="true" requiredMessage="Firstname is required"/>

               <rich:message for="editName"/>

                       <h:outputLabel for="editLastName" value="Last Name"/>

               <h:inputText id="editLastName" value="sessionBean.selectedItem.lastName" required="true" requiredMessage="Last Name is required"/>

                      <rich:message for="editLastName"/>

                      <a4j:commandButton value="Cancel" onclick="#{rich:component('editPopup')}.hide();" render="tableId"/>

               <h:outputText value="Updated Item"/>

               <a4j:commandButton value="Edit" action="#{itemAction.editItem()}" render="editItemsPanel'/>

          </h:panelGrid>

          <h:panelGrid column="1" rendered="#{itemAction.done}">

               <h:outputText value="Added Item"/>

               <a4j:commandButton value="Close" onclick="#{rich:component('editPopup')}.hide();" render="tableId"/>

          </h:panelGrid>

   </rich:panel>

     </h:form>

</rich:popupPanel>

<rich:popupPanel id="delPopup" autosize="true">

     <f:facet name="header">

          <h:outputText value="Delete Item"/>

     </f:facet>

     <f:facet name="controls">

          <h:ouputLink value="#" onclick="#{rich:component('delPopup')}.hide(); return false;}">

               <h:graphicImage url="/resources/images/close.png" stype="border:none"/>

          </h:outputLink>

     </f:facet>

     <h:form>

          <rich:panel id="delItemsPanel">

               <rich:messages globalOnly="true"/>

          <h:panelGrid columns="2" rendered="#{!itemAction.done}">

               <h:outputText value="Firstname:"/>

               <h:outputText value="sessionBean.selectedItem.firstName"/>

                       <h:outputText value="Last Name"/>

               <h:outputText value="sessionBean.selectedItem.lastName"/>

                      <a4j:commandButton value="Cancel" onclick="#{rich:component('delPopup')}.hide();" render="tableId"/>

               <h:outputText value="Deleted Item"/>

               <a4j:commandButton value="Delete" action="#{itemAction.delItem()}" render="delItemsPanel'/>

          </h:panelGrid>

          <h:panelGrid column="1" rendered="#{itemAction.done}">

               <h:outputText value="Deleted Item"/>

               <a4j:commandButton value="Close" onclick="#{rich:component('delPopup')}.hide();" render="tableId"/>

          </h:panelGrid>

   </rich:panel>

     </h:form>

</rich:popupPanel>

Message was edited by: Bongani Hlope Accidentally submitted without the other two popups

[crimson]

Hi Bongani,

I think it has to do with a general JSF2 problem (search on the web - you will find plenty info on that):

You are indirectly (re)rendering the h:form inside your three popupPanel from an action in another h:form (the form of your dataTable).

It is known, that this is not working ... there are various ways to solve this.

• 1st would be to drop the h:form inside your h:popupPanel and use just one h:form for the entire page. In this case you should add the attribute domElementAttachment="form" to your popupPanels.
• 2nd would be to directly (re)render the h:form inside your popuPanels. This would need you to ad ids to these h:form and then from your a4j:commandLink render not only your popupPanel but also explicitly the included h:form.

Bye,

Manuel

[bhlope]

Thank you Manuel. I used the second option, because it required less changes and was quicker to test and the popups are working correctly now.