1 Reply Latest reply on Aug 10, 2011 8:06 AM by Kapil Nimje

    DataTable Editing using Rich Modal Panel causing problem

    Kapil Nimje Newbie

      Hi,

       

       

      I have the datatable which displays the values from the database table. The datatable have the action column for editing and deleting the records. On clicking on edit link we are displaying the rich modal panel with the existing records exists in the database for that row using the form fields (i.e. for Input Text components, etc). When clickin on edit link i am setting those values in my bean class's properties.

       

      Now what i am facing the issue is, once i click on the update button inside the modal Panel, i am calling the action method which will update the same in the database table. but in this case my bean properties which i set while clickin on edit link returns the null values for all those properties.

       

      Please find the below code.

       

      xhtml Page.

       

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

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

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

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

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

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

       

          <style type="text/css">

              .tooltip {

                  background-color: #{richSkin.generalBackgroundColor};

                  border-width: 3px;

                  padding: 10px;

                  text-align: center;

                  line-height: normal;

              }

          </style>

       

          <f:view>

          <h:form>

              <rich:panel>

       

              <f:facet name="header">

                  <h:outputText value="Account Search" />

              </f:facet>

       

              <a4j:region>

                  <rich:dataTable id="data_table"

                                  width="100%"

                                  border="0"

                                  cellspacing="0"

                                  cellpadding="0"

                                  headerClass="headers"

                                  rowClasses="alt1,alt2"

                                  var="account"

                                  value="#{accountController.existingAccounts}"

                                  binding="#{accountController.accountDataTable}"

                                  iterationStatusVar="it"

                                  rows="5">

       

                      <rich:column id="companyNameColumn" sortBy="#{account.companyName}" filterMethod="#{globalFilterBean.filterByAccountName}" filterValue="#{globalFilterBean.nameFilterValue}">

                      <!--<rich:column filterBy="#{account.companyName}" filterEvent="onkeyup" filterValue="#{globalFilterBean.filterValue}">-->

                          <f:facet name="header">

                              <h:outputText value="Company"/>

                          </f:facet>

                          <!--<h:commandLink value="#{account.companyName}" action="#{accountController.accountFilterSearch}"/>-->

                          <a4j:commandLink value="#{account.companyName}-#{account.id}" action="#{accountController.accountFilterSearch}" status="waitStatus"/>

                      </rich:column>

       

                      <rich:column id="contactNameColumn" sortBy="#{account.contactName}">

                          <f:facet name="header"><h:outputText value="Contact Person"/></f:facet>

                          <h:outputText value="#{account.contactName}"/>

                      </rich:column>

       

                      <rich:column id="contactTitleColumn" sortBy="#{account.contactTitle}">

                          <f:facet name="header"><h:outputText value="Title"/></f:facet>

                          <h:outputText value="#{account.contactTitle}"/>

                      </rich:column>

       

                      <rich:column id="contactPhoneColumn" sortBy="#{account.contactPhone}">

                          <f:facet name="header"><h:outputText value="Contact Phone"/></f:facet>

                          <h:outputText value="#{account.contactPhone}"/>

                      </rich:column>

       

                      <rich:column id="contactEmailColumn" sortBy="#{account.contactEmail}">

                          <f:facet name="header"><h:outputText value="Contact E-mail"/></f:facet>

                          <h:outputText value="#{account.contactEmail}"/>

                      </rich:column>

       

                      <rich:column id="createdAtColumn" sortBy="#{account.createdAt}">

                          <f:facet name="header"><h:outputText value="Created On"/></f:facet>

                          <h:outputText value="#{account.createdAt}">

                              <f:convertDateTime pattern="MM/dd/yyyy"/>

                          </h:outputText>

                      </rich:column>

       

                      <!--<rich:column id="actionColumn">

                              <f:facet name="header"><h:outputText value="Actions"/></f:facet>

                              <h:commandLink value="Edit" action="#{accountController.editAction}" />

                              <h:outputText value=" | " rendered="#{accountController.deletable and account.id != 1}"/>

                              <h:commandLink value="Delete" action="#{accountController.destroyAction}" onclick="return confirm('Are your sure you want to delete the account?');" rendered="#{accountController.deletable and account.id != 1}"/>

                          </rich:column>

                     </rich:dataTable>-->

       

                     <rich:column>

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

                          <a4j:commandLink ajaxSingle="true" id="editlink" action="#{accountController.editAction}"

                              oncomplete="#{rich:component('editPanel')}.show()" status="waitStatus">

                              <h:graphicImage value="/images/edit.gif" style="border:0" />

                              <f:setPropertyActionListener value="#{account.id}" target="#{accountBean.id}" />

                             

       

                          </a4j:commandLink>

       

                          <rich:toolTip for="editlink" value="Edit" />

       

                          <a4j:commandLink ajaxSingle="true" id="deletelink"

                              oncomplete="#{rich:component('deletePanel')}.show()">

                              <h:graphicImage value="/images/delete.gif" style="border:0" />

                              <f:setPropertyActionListener value="#{row}"

                                  target="#{dataTableScrollerBean.currentRow}" />

                          </a4j:commandLink>

                          <rich:toolTip for="deletelink" value="Delete" />

       

                      </rich:column>

       

                  </rich:dataTable>

                  </a4j:region>

       

                  <br/>

                  <rich:datascroller id="data_scroller"

                                     for="data_table"

                                     fastControls="hide"

                                     style="float: right;" status="waitStatus">

                      <f:facet name="first">

                          <h:outputText value="First"/>

                      </f:facet>

                      <f:facet name="first_disabled">

                          <h:outputText value="First"/>

                      </f:facet>

                      <f:facet name="next">

                          <h:outputText value="Next"/>

                      </f:facet>

                      <f:facet name="next_disabled">

                          <h:outputText value="Next"/>

                      </f:facet>

                      <f:facet name="previous">

                          <h:outputText value="Previous"/>

                      </f:facet>

                      <f:facet name="previous_disabled">

                          <h:outputText value="Previous"/>

                      </f:facet>

                      <f:facet name="last">

                          <h:outputText value="Last"/>

                      </f:facet>

                      <f:facet name="last_disabled">

                          <h:outputText value="Last"/>

                      </f:facet>

                  </rich:datascroller>

                  <br/>

       

              </rich:panel>

          </h:form>

       

              <rich:modalPanel id="editPanel" autosized="true" width="600">

                  <f:facet name="header">

                      <h:outputText value="Edit Current Account" />

                  </f:facet>

                  <f:facet name="controls">

                      <h:panelGroup>

                          <h:graphicImage value="/images/icon_close.gif" id="hidelink" styleClass="hidelink" />

                          <rich:componentControl for="editPanel" attachTo="hidelink" operation="hide" event="onclick" />

                      </h:panelGroup>

                  </f:facet>

                  <h:form id="editForm">

                      <rich:messages style="color:red;"></rich:messages>

                      <h:panelGrid columns="1">

                          <a4j:outputPanel ajaxRendered="true">

                              <h:panelGrid columns="4" cellpadding="0" cellspacing="5">

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

                                  <h:inputText value="#{accountBean.companyName}" immediate="true" />

       

                                  <h:outputText value="Company Phone" />

                                  <h:inputText value="#{accountBean.companyPhone}" immediate="true" />

       

                                  <h:outputText value="Address Line 1" />

                                  <h:inputText value="#{accountBean.address1}" immediate="true" />

       

                                  <h:outputText value="Address Line 2" />

                                  <h:inputText value="#{accountBean.address2}" immediate="true" />

       

                                  <h:outputText value="City/State/Zip" />

                                  <h:inputText value="#{accountBean.cityStateZip}" immediate="true" />

       

                                  <h:outputText value="Country" />

                                  <h:inputText value="#{accountBean.country}" immediate="true" />

       

                                  <h:outputText value="Primary Contact Name" />

                                  <h:inputText value="#{accountBean.contactName}" immediate="true" />

       

                                  <h:outputText value="Primary Contact Title" />

                                  <h:inputText value="#{accountBean.contactTitle}" immediate="true" />

       

                                  <h:outputText value="Primary Contact Phone" />

                                  <h:inputText value="#{accountBean.contactPhone}" immediate="true" />

       

                                  <h:outputText value="Primary Contact E-Mail" />

                                  <h:inputText value="#{accountBean.contactEmail}" immediate="true" />

       

                                  <h:outputText value="Email Notification List (one email address per line):" />

                                  <h:inputTextarea id="notificationEmails" value="#{accountBean.notificationRecipients}" immediate="true">

                                      <rich:toolTip for="notificationEmails" direction="top-right" hideDelay="2000" hideEvent="onmouseover"  styleClass="tooltip">

                                          <span style="white-space:nowrap;">

                                              By default, all notifications are sent to the <strong>Account Administrator</strong><br/>unless other recipients are specified here.

                                          </span>

                                      </rich:toolTip>

                                  </h:inputTextarea>

       

                                  <!--<h:outputText value="Price" />

                                  <h:inputText value="#{dataTableScrollerBean.currentItem.price}"

                                      label="Price" immediate="true" />-->

                              </h:panelGrid>

                              <rich:message showSummary="true" showDetail="false" for="price" />

                          </a4j:outputPanel>

       

                          <a4j:commandButton value="Update Account"

                              action="#{accountController.updateAction}"

                              reRender="data_table"

                              immediate="true"

                              oncomplete="if(#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();" />

       

                      </h:panelGrid>

                  </h:form>

              </rich:modalPanel>

               <rich:messages></rich:messages>

      </f:view>

       

       

      </ui:composition>

       

       

       

      Bean Java Class

       

       

      package com.dimestore.vi.web.bean;

       

      import org.springframework.context.annotation.Scope;

      import org.springframework.stereotype.Component;

       

      import javax.faces.event.ValueChangeEvent;

      import java.util.List;

       

      @Scope(value = "request")

      @Component(value = "accountBean")

      public class AccountBean {

          // ---------- MEMBER VARIABLES ----------

          private Long id;

          private String address1;

          private String address2;

          private String cityStateZip;

          private String country;

          private String companyName;

          private String companyPhone;

          private String contactName;

          private String contactTitle;

          private String contactEmail;

          private String contactPhone;

          private String notificationRecipients;

       

          // ---------- GETTERS & SETTERS ----------

          public Long getId() {

              return id;

          }

       

          public void setId(Long id) {

              this.id = id;

          }

       

          public String getAddress1() {

              return address1;

          }

       

          public void setAddress1(String address1) {

              this.address1 = address1;

          }

       

          public String getAddress2() {

              return address2;

          }

       

          public void setAddress2(String address2) {

              this.address2 = address2;

          }

       

          public String getCityStateZip() {

              return cityStateZip;

          }

       

          public void setCityStateZip(String cityStateZip) {

              this.cityStateZip = cityStateZip;

          }

       

          public String getCountry() {

              return country;

          }

       

          public void setCountry(String country) {

              this.country = country;

          }

       

          public String getCompanyName() {

              return companyName;

          }

       

          public void setCompanyName(String companyName) {

              this.companyName = companyName;

          }

       

          public String getCompanyPhone() {

              return companyPhone;

          }

       

          public void setCompanyPhone(String companyPhone) {

              this.companyPhone = companyPhone;

          }

       

          public String getContactName() {

              return contactName;

          }

       

          public void setContactName(String contactName) {

              this.contactName = contactName;

          }

       

          public String getContactTitle() {

              return contactTitle;

          }

       

          public void setContactTitle(String contactTitle) {

              this.contactTitle = contactTitle;

          }

       

          public String getContactEmail() {

              return contactEmail;

          }

       

          public void setContactEmail(String contactEmail) {

              this.contactEmail = contactEmail;

          }

       

          public String getContactPhone() {

              return contactPhone;

          }

       

          public void setContactPhone(String contactPhone) {

              this.contactPhone = contactPhone;

          }

       

          public String getNotificationRecipients() {

              return notificationRecipients;

          }

       

          public void setNotificationRecipients(String notificationRecipients) {

              this.notificationRecipients = notificationRecipients;

          }

       

          public void companyNameValueChanges(ValueChangeEvent event) {

              companyName = (String) event.getNewValue();

          }

      }

       

       

      ActionController Java Class

       

      Class AccountController {

       

        public String editAction() {

               String status = FAILURE;

               FacesContext ctx = FacesContext.getCurrentInstance();

               if (accountBean != null) {

                   try {

                       Account accountToEdit = (Account) accountDataTable.getRowData();

                       AccountUtil.populateAccountBean(accountBean, accountToEdit);

                       status = SUCCESS;

                   } catch (Exception ex) {

                       logger.error(ex.getMessage());

                       ctx.addMessage(null, new FacesMessage(SEVERITY_ERROR, SYSTEM_ERROR_MESSAGE, null));

                   }

               }

               return status;

       

        } // end method editAction

       

      public String updateAction() {

               String status = FAILURE;

               FacesContext ctx = FacesContext.getCurrentInstance();

               FacesMessage message = new FacesMessage();

       

               if (accountBean != null && accountService != null && userSessionBean != null) {

                   try {

                       Account persistentAccount = accountService.getAccountById(accountBean.getId());

                       AccountUtil.populatePersistentAccount(persistentAccount, accountBean);

                       persistentAccount.setUpdatedAt(new Timestamp(System.currentTimeMillis()));

        

                      if (accountService.updateAccount(persistentAccount)) {

                           userSessionBean.setAccount(persistentAccount);

                           message.setSeverity(SEVERITY_INFO);

                           message.setSummary("Your account was successfully updated");

                           status = SUCCESS;

                       } else {

                           message.setSeverity(SEVERITY_WARN);

                           message.setSummary("Unable to update your account at this time");

                       }

                   } catch (Exception ex) {

                       logger.error(ex.getMessage());

                   }

               } else {

                   message.setSeverity(SEVERITY_ERROR);

                   message.setSummary(SYSTEM_ERROR_MESSAGE);

               }

       

              ctx.addMessage(null, message);

               return status;

           } // end method updateAction

      }

       

       

      Please find the attached form for your reference.

       

      Kindly let me know whats wrong in my code.