2 Replies Latest reply on Mar 17, 2013 4:54 AM by Bongani Hlope

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

    Bongani Hlope Newbie

      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