2 Replies Latest reply on Jun 13, 2013 9:30 AM by Cory Dahlstrom

    rich:popupPanel not updating backing bean

    Klay Martens Newbie

      Hi,

      I have encountered some seriously unexpected behaviour while working with a popupPanel. I must be missing something, but this just makes no sense.

      Basically, I want the user to be able to right click on a row of data in a table and request an edit form to be display from the context menu. The user should then be able to update the contents of the form and save the resulting object to the database.

      Right, simple enough...or so I thought.

      The context menu works beautifully, the popup window with the values to be edited are displayed, exactly as expected...but:

      When the save command is executed, a new instance of the dataobject gets created...with all null values. In sheer desperation I created an edit class with a static member to hold the object to be updated - lo and behold the code works...but the changes made in the popup form are not being propogated onto the backing bean.... I simply dont understand this behaviour. What am I missing? Any suggestions?

      Here is the xhtml, for what it is worth...

       

      <ui:composition

        xmlns="http://www.w3.org/1999/xhtml"    

        xmlns:rich="http://richfaces.org/rich"

        xmlns:f="http://java.sun.com/jsf/core"

        xmlns:a4j="http://richfaces.org/a4j"     

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html">

        <h:form id="usersForm">

         

          <rich:extendedDataTable id="userTable"                             

                                    value="#{controlUserList.userData}"                             

                                    selection="#{userTableSelectionManager.selection}"

                                    var="user"

                                    styleClass="rich-panel-body"      

                                    columnClasses="50,100,100,100" 

                                    onrowmouseover="this.style.backgroundColor='#00bfff'"          

                                    onrowmouseout="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'">

               <a4j:ajax execute="@usersForm"

                         event="selectionchange"

                         render="editUserPane"

                         immediate="true"

                         listener="#{userTableSelectionManager.userTableSelectionListener}"/>

              <f:facet name="header">

                <h:outputText value="System Users" />

              </f:facet>

             

              <rich:column>

                <f:facet name="header">First Name</f:facet>

                <h:outputText value="#{user.firstName}" />            

              </rich:column>

              <rich:column>

                <f:facet name="header">Last Name</f:facet>

                <h:outputText value="#{user.lastName}" />            

              </rich:column>

              <rich:column>

                <f:facet name="header">Login</f:facet>

                <h:outputText value="#{user.login}" />            

              </rich:column>

              <rich:column>

                <f:facet name="header">Use AD</f:facet>

                <div align="center">

                  <h:selectBooleanCheckbox disabled="true" value="#{user.useActiveDirectory}" />

                </div>

              </rich:column>

              <rich:column>

                <f:facet name="header">Email Address</f:facet>

                <h:outputText value="#{user.emailAddress}" />            

              </rich:column>

              <rich:column>

                <f:facet name="header">SMS Address</f:facet>

                <h:outputText value="#{user.sms}" />            

              </rich:column>

            </rich:extendedDataTable> 

         

         

          <!-- Popup Menu-->

          <rich:contextMenu target="userTable"

                            mode="ajax"

                            id="userTableContext">                

            <rich:menuItem label="Delete Selected Users"

                           render="popupContent" immediate="true"

                           oncomplete="#{rich:component('confirmPane')}.show();"                             

                           mode="ajax" icon="/images/user_delete.png"/>

            <rich:menuItem label="Edit User"

                           immediate="true"     

                           render="popupContent"

                           oncomplete="#{rich:component('editUserPane')}.show();"                             

                           mode="ajax" icon="/images/user_edit.png"/> 

          </rich:contextMenu>

         

          <!-- Popup Forms-->

          <rich:popupPanel id="confirmPane" autosized="true" >            

            Are you sure you want to delete the selected users?            

            <a4j:commandButton value="Cancel"

                               onclick="#{rich:component('confirmPane')}.hide(); return false;" />            

            <a4j:commandButton value="Delete"

                               onclick="Delete(); return false;" />        

          </rich:popupPanel>

         

          <a4j:jsFunction name="Delete" action="#{userTableSelectionManager.deleteSelectedUsers}"

                          execute="@usersForm"

                          oncomplete="#{rich:component('confirmPane')}.hide();ReloadUsers();" />

         

          <a4j:jsFunction name="SaveSelectedUser" action="#{userTableSelectionManager.saveSelectedUser()}"

                          oncomplete="#{rich:component('editUserPane')}.hide();ReloadUsers();return false;"/>

         

          <a4j:jsFunction name="ReloadUsers" action="#{controlUserList.reloadUserList}"

                          render="userTable, userTableContext"

                          oncomplete="return false;"/>

         

          <rich:popupPanel id="editUserPane"

                           modal="true"

                           autosized="true">

            <f:facet name="header">

              <div style="text-align:center;">

                <h:outputText value="User Details" />

              </div>

            </f:facet>     

           

            <h:panelGrid id="selectedUserDetails"

                         columns="2"

                         width="auto"

                         rendered="#{userTableSelectionManager.notNullSelectionItem}">

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

              <h:inputText   id="inputFirstName"

                             value="#{userTableSelectionManager.selectedUser.firstName}"/>

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

              <h:inputText   id="inputLastName"

                             value="#{userTableSelectionManager.selectedUser.lastName}"/>

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

              <h:inputText   id="inputLogin"

                             value="#{userTableSelectionManager.selectedUser.login}"/>

              <h:outputText  value="Email Address:" />

              <h:inputText   id="inputEmailAddress"

                             value="#{userTableSelectionManager.selectedUser.emailAddress}"/>

              <h:outputText  value="SMS Number:" />

              <h:inputText   id="inputSMS"

                             value="#{userTableSelectionManager.selectedUser.sms}"/>

            </h:panelGrid>

            <h:panelGrid columns="2">

              <a4j:commandButton id="cancelButton"

                                 value="Cancel"

                                 onclick="#{rich:component('editUserPane')}.hide(); return false;"/>            

              <a4j:commandButton id="saveButton"

                                 value="Save"

                                 execute="@form"

                                 onclick="SaveSelectedUser()">

                

              </a4j:commandButton>

            </h:panelGrid>    

           

          </rich:popupPanel>

         

        </h:form>

       

      </ui:composition>