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

    Help to update rich:datatable with the rich:modalpanel

    Girish Mony Newbie

      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
          Nick Belaevski Master

          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
            Nick Belaevski Master

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

            • 3. Re: Help to update rich:datatable with the rich:modalpanel
              Girish Mony Newbie

              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
                Girish Mony Newbie

                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 Master

                  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
                    Girish Mony Newbie

                    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
                      Nick Belaevski Master

                      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
                        Girish Mony Newbie

                        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.