8 Replies Latest reply on Sep 6, 2009 9:01 AM by mvg90

    Help to update rich:datatable with the rich:modalpanel

    mvg90

      Hi all,

      I am trying to update the row of the datatable with the modal panel. I am able to get the selected row in the modalpanel, but when I update I am unable to update the new edited value in the database, instead the old value the value before editing goes to the database. Please help.

      This is my JSP code

      <f:view>
       <h:form>
       <rich:panel>
       <f:facet name="header">
       Product
       </f:facet>
       <a4j:outputPanel ajaxRendered="true">
       <rich:dataTable value="#{productManager.productInfo}" var="product" ajaxKeys="#{productManager.rowsToUpdate}" id="table" rows="5" onRowMouseOver="this.style.backgroundColor='#B5CEFD'" onRowMouseOut="this.style.backgroundColor='#ffffff'" binding="#{productManager.dataTable}" style=" width : 303px;">
      
       <h:column>
       <f:facet name="header">
       <h:outputText value="Name"></h:outputText>
       </f:facet>
       <h:outputText id="name1" value="#{product.name}"/>
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Description"></h:outputText>
       </f:facet>
       <h:outputText id="description1" value="#{product.description}"/>
       </h:column>
       <h:column>
       <f:facet name="header">
       <h:outputText value="Actions"></h:outputText>
       </f:facet>
       <a4j:commandButton value="Edit"
       oncomplete="#{rich:component('useredit')}.show()"
       reRender="userinfo" action="#{productManager.editMode}">
       <f:setPropertyActionListener value="#{product}"
       target="#{productManager.product}" />
       </a4j:commandButton>
       <h:commandButton action="#{productManager.delete}" value="Delete" onclick="confirm('Do you want to delete this data?')"/>
      
       </h:column>
      
       </rich:dataTable>
       </a4j:outputPanel>
       <richfaces:datascroller for="table" maxPages="10">
       <f:facet name="first">
       <h:outputText value="First"/>
       </f:facet>
       <f:facet name="last">
       <h:outputText value="Last"/>
       </f:facet>
       </richfaces:datascroller>
      
       <rich:modalPanel id="useredit" moveable="true">
      
       <f:facet name="header">
      
       <h:outputText value="Product"></h:outputText>
      
       </f:facet>
      
       <h:panelGrid id="userinfo">
      
       <h:outputLabel for="name" value="Name:"/>
      
       <h:inputText id="name" value="#{productManager.productToUpdate.name}" binding="#{productManager.inputName}"/>
      
       <h:outputLabel for="description" value="Description:"/>
      
       <h:inputText id="description" value="#{productManager.productToUpdate.description}"/>
      
       <a4j:commandButton reRender="name1,description1" oncomplete="if (#{facesContext.maximumSeverity==null})#{rich:component('useredit')}.hide()" value="Save" ajaxSingle="true" actionListener="#{productManager.save}">
      
       </a4j:commandButton>
       <a onclick="Richfaces.hideModalPanel('useredit');" href="#">Hide</a>
      
       </h:panelGrid>
      
      
      </rich:modalPanel>
      <a4j:status onstart="#{rich:component('wait')}.show()" onstop="#{rich:component('wait')}.hide()"/>
       <rich:modalPanel id="wait" autosized="true" width="200" height="120" moveable="false" resizeable="false">
       <f:facet name="header">
       <h:outputText value="Processing"/>
       </f:facet>
       <h:outputText value="Wait Please..."/>
       </rich:modalPanel>
       <rich:messages></rich:messages>
       </rich:panel>
      
       </h:form>
      
       </f:view>
      


      and my java code is

       public void init()
       {
       rowsToUpdate = new HashSet<Integer>();
       }
      
       /**
       * @return the dataTable
       */
       public HtmlDataTable getDataTable() {
       return dataTable;
       }
      
      
      
       /**
       * @return the productToUpdate
       */
       public Product getProductToUpdate()
       {
       return productToUpdate;
       }
      
      
      
       /**
       * @param productToUpdate the productToUpdate to set
       */
       public void setProductToUpdate(Product productToUpdate) {
       this.productToUpdate = productToUpdate;
       }
      
      
      
       /**
       * @param dataTable the dataTable to set
       */
       public void setDataTable(HtmlDataTable dataTable) {
       this.dataTable = dataTable;
       }
      
      
      
       public void setNameToUpdate(String nameToUpdate) {
       this.nameToUpdate = nameToUpdate;
       }
      
      
      
       public Product getProduct()
       {
       return product;
       }
      
       public void setProduct(Product product)
       {
       System.out.println("Setting product");
       setProductToUpdate(product);
       this.product = product;
       }
      
      
      
       public String editMode()
       {
       System.out.println("Edit mode method");
       setProductToUpdate((Product)dataTable.getRowData());
       setNameToUpdate(getProductToUpdate().getName());
       return "success";
       }
      
      
      
       public List<Product> getProductInfo()
       {
       System.out.println("GetProductInfo");
       productDAO = new ProductDAO();
       productInfo = productDAO.getFromDataBase();
       return productInfo;
       }
      
      
       public void setProductInfo(List<Product> productInfo)
       {
       this.productInfo = productInfo;
       }
      
       public void save (ActionEvent event)
       {
       productDAO = new ProductDAO();
       productDAO.updateProductInDatabase(getProduct().getName(), getProduct().getDescription(), getProduct().getId());
       }
      



      Please help

      Thanks in advance

        • 1. Re: Help to update rich:datatable with the rich:modalpanel
          nbelaevski

          Are you using ajaxSingle=true to call "save" action, that's the cause. Also check the documentation on specifics of forms usage that rich:modalPanel requires.

          • 2. Re: Help to update rich:datatable with the rich:modalpanel
            nbelaevski

            Correction: should be read as "You are using..."

            • 3. Re: Help to update rich:datatable with the rich:modalpanel
              mvg90

              Thank you for the reply. I will work with the suggestions and get back to you with the result

              Thanks again for the instant reply

              • 4. Re: Help to update rich:datatable with the rich:modalpanel
                mvg90

                Hi nbelaevski,

                I tried removing it and still it does not update new values. Please help

                • 5. Re: Help to update rich:datatable with the rich:modalpanel
                  ilya_shaikovsky

                  remove what? ajax Single? then check please forms usage limitations as Nick suggested.

                  And b.t.w. it would be good to show code snippets after some modifications again.

                  • 6. Re: Help to update rich:datatable with the rich:modalpanel
                    mvg90

                    Hi Ilya,

                    As Nick suggested, I checked the reference guide and found that modalpanel should be placed in separate form. Hence I modified the code as follows.

                    <f:view>
                     <h:form>
                     <rich:panel>
                     <f:facet name="header">
                     Product
                     </f:facet>
                     <a4j:outputPanel ajaxRendered="true" id="panel">
                     <rich:dataTable value="#{productManager.productInfo}" var="product" ajaxKeys="#{productManager.rowsToUpdate}" id="table" captionClass="trialForDataTable" columnClasses="trialForDataTable" headerClass="trialForDataTable" rows="5" onRowMouseOver="this.style.backgroundColor='#B5CEFD'" onRowMouseOut="this.style.backgroundColor='#ffffff'" style=" width : 370px;" binding="#{productManager.dataTable}">
                     <h:column>
                     <f:facet name="header">
                     <h:outputText value="Name"></h:outputText>
                     </f:facet>
                     <h:outputText id="name1" value="#{product.name}"/>
                     </h:column>
                     <h:column>
                     <f:facet name="header">
                     <h:outputText value="Description"></h:outputText>
                     </f:facet>
                     <h:outputText id="description1" value="#{product.description}"/>
                     </h:column>
                     <h:column>
                     <f:facet name="header">
                     <h:outputText value="Actions"></h:outputText>
                     </f:facet>
                     <a4j:commandButton value="Edit"
                     oncomplete="#{rich:component('useredit')}.show()"
                     reRender="userinfo" action="#{productManager.editMode}">
                     <f:setPropertyActionListener value="#{product}"
                     target="#{productManager.product}" />
                     </a4j:commandButton>
                     <h:commandButton action="#{productManager.delete}" value="Delete" onclick="confirm('Do you want to delete this data?')"/>
                    
                     </h:column>
                    
                     </rich:dataTable>
                     </a4j:outputPanel>
                     <richfaces:datascroller for="table" maxPages="10" style=" width : 544px;">
                     <f:facet name="first">
                     <h:outputText value="First"/>
                     </f:facet>
                     <f:facet name="last">
                     <h:outputText value="Last"/>
                     </f:facet>
                     </richfaces:datascroller>
                    
                    
                     </rich:panel>
                    
                     </h:form>
                     <a4j:form ajaxSubmit="true">
                     <rich:modalPanel id="useredit" moveable="true">
                    
                     <f:facet name="header">
                    
                     <h:outputText value="Product"></h:outputText>
                    
                     </f:facet>
                    
                     <h:panelGrid id="userinfo">
                    
                     <h:outputLabel for="name" value="Name:"/>
                    
                     <h:inputText id="name" value="#{productManager.product.name}" binding="#{productManager.inputName}"/>
                    
                     <h:outputLabel for="description" value="Description:"/>
                    
                     <h:inputText id="description" value="#{productManager.product.description}"/>
                    
                     <a4j:commandButton reRender="panel" oncomplete="#{rich:component('useredit')}.hide()" value="Save" actionListener="#{productManager.save}" ajaxSingle="false">
                     <f:setPropertyActionListener value="#{productManager.product}"
                     target="#{productManager.product}" />
                     </a4j:commandButton>
                     <a onclick="Richfaces.hideModalPanel('useredit');" href="#">Hide</a>
                    
                     </h:panelGrid>
                    
                    
                    </rich:modalPanel>
                    <a4j:status onstart="#{rich:component('wait')}.show()" onstop="#{rich:component('wait')}.hide()"/>
                     <rich:modalPanel id="wait" autosized="true" width="200" height="120" moveable="false" resizeable="false">
                     <f:facet name="header">
                     <h:outputText value="Processing"/>
                     </f:facet>
                     <h:outputText value="Wait Please..."/>
                     </rich:modalPanel>
                     <rich:messages></rich:messages>
                     </a4j:form>
                    
                     </f:view>
                    
                    


                    Even after doing this I am unable to update new value to the database.
                    Please help

                    • 7. Re: Help to update rich:datatable with the rich:modalpanel
                      nbelaevski

                      Hi,

                      Form should be inside rich:modalPanel.

                      Also what's the point in doing this:

                      <f:setPropertyActionListener value="#{productManager.product}"
                       target="#{productManager.product}" />
                      ?

                      • 8. Re: Help to update rich:datatable with the rich:modalpanel
                        mvg90

                        Hi Nick,

                        Thank you for the reply. Your idea to place form inside modalpanel works and my problem is solved. The line you said, I added it to check whether it helps to solve the problem and I forget to remove it. I removed it now. Thanks again for patiently solving my problem.