7 Replies Latest reply on Aug 24, 2009 6:53 AM by asingla4

    rich:modalPanel data persistence issue

      Hi,

      I am using rich:modalPanel to edit the rows of my table.

      I'll explain the problem with an example,

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition template="../template/adminTemplate.xhtml"
       xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich">
      
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <ui:define name="includePageTitle">Academic Programs</ui:define>
       <ui:define name="includeCss">
       <style>
      .top {
       vertical-align: top;
      }
      .info {
       height: 202px;
       overflow: auto;
      }
       </style></ui:define>
       <ui:define name="includeJs">
       <script>
       function clearForm(oForm) {
       var elements = oForm.elements;
       oForm.reset();
       alert(elements.length)
       for(i=0; elements.length>i; i++) {
       field_type = elements.type.toLowerCase();
       switch(field_type) {
       case "text":
       case "password":
       case "textarea":
       case "hidden":
       elements.value = "";
       break;
       case "radio":
       case "checkbox":
       if (elements.checked) {
       elements.checked = false;
       }
       break;
       case "select-one":
       case "select-multi":
       elements.selectedIndex = -1;
       break;
       default:
       break;
       }
       }
       }
      
       </script>
      
       </ui:define>
       </head>
       <body>
       <ui:define name="body"><h:form id="mainform">
       <a4j:region>
       <rich:extendedDataTable value="#{acadProgBean.progList}" var="program" rowKeyVar="row" id="programTable" style="margin:0 auto;"
       sortMode="multi" height="300px" width="80%">
       <rich:column sortable="false" filterBy="#{program.courseId}" filterEvent="onkeyup">
       <f:facet name="header">
       <h:outputText value="Program ID"/>
       </f:facet>
       <h:outputText value="#{program.courseId}" id="courseId"/>
       </rich:column>
       <rich:column sortable="true" sortBy="#{program.courseName}" width="25%">
       <f:facet name="header">
       <h:outputText value="Program Name"/>
       </f:facet>
       <h:outputText value="#{program.courseName}" id="courseName"/>
       </rich:column>
       <rich:column sortable="false" filterBy="#{program.courseDuration}" filterEvent="onkeyup" width="125px">
       <f:facet name="header">
       <h:outputText value="Program Duration"/>
       </f:facet>
       <h:outputText value="#{program.courseDuration}" id="courseDuration"/>
       </rich:column>
       <rich:column sortable="true" sortBy="#{program.semesterPerYear}" width="27%">
       <f:facet name="header">
       <h:outputText value="Sessions/year for Program"/>
       </f:facet>
       <h:outputText value="#{program.semesterPerYear}" id="semesterPerYear"/>
       </rich:column>
       <rich:column style="text-align:left" label="Actions">
       <f:facet name="header">
       <h:outputText value="Actions"/>
       </f:facet>
      
       <a4j:commandLink ajaxSingle="true" id="editlink"
       oncomplete="#{rich:component('editPanel')}.show()">
       <h:graphicImage value="../images/table/edit.gif" style="border:0"/>
       <f:setPropertyActionListener value="#{program}"
       target="#{acadProgBean.currentObject}" />
       <f:setPropertyActionListener value="#{row}"
       target="#{acadProgBean.currentRow}" />
       </a4j:commandLink>
       <rich:toolTip for="editlink" value="Edit"/>
      
       <a4j:commandLink ajaxSingle="true" id="deletelink"
       oncomplete="#{rich:component('deletePanel')}.show()">
       <h:graphicImage value="../images/table/delete.gif" style="border:0"/>
       <f:setPropertyActionListener value="#{program}"
       target="#{acadProgBean.currentObject}" />
       <f:setPropertyActionListener value="#{row}"
       target="#{acadProgBean.currentRow}" />
       </a4j:commandLink>
       <rich:toolTip for="deletelink" value="Delete"/>
      
       <a4j:commandLink ajaxSingle="true" id="updateSessionlink" action="#{acadProgBean.modifySessionList}"
       reRender="currentCourseId,sessionTable" limitToList="true"
       oncomplete="document.getElementById('mainform:addSessionButton').style.visibility='visible'">
       <h:graphicImage value="../images/course/assignments.gif" style="border:0"/>
       <f:setPropertyActionListener value="#{program}"
       target="#{acadProgBean.currentObject}" />
       <f:setPropertyActionListener value="#{row}"
       target="#{acadProgBean.currentRow}" />
       </a4j:commandLink>
       <rich:toolTip for="updateSessionlink" value="Update Sessions"/>
       </rich:column>
       </rich:extendedDataTable>
       <a4j:commandButton value="ADD" oncomplete="#{rich:component('addPanel')}.show()" action="#{acadProgBean.clearCurrentObj}"/>
      
       <hr/>
      
       <h:panelGrid columns="2">
       <h:outputText value="Program Id--" style="font-weight:bold"/>
       <h:outputText id="currentCourseId" value="#{acadProgBean.currentCourseId}"/>
       </h:panelGrid>
       <br/>
      
       <hr/>
       </a4j:region>
       </h:form>
      
       </ui:define>
       <ui:define name="modal">
       <a4j:keepAlive beanName="acadProgBean"/>
      
       <rich:modalPanel id="editPanel" autosized="true" width="450" keepVisualState="false">
       <f:facet name="header">
       <h:outputText value="Edit Current Program" />
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="../images/table/close.gif" id="hidelink" styleClass="hidelink"/>
       <rich:componentControl for="editPanel" attachTo="hidelink" operation="hide" event="onclick" />
       </h:panelGroup>
       </f:facet>
       <h:form id="updateModalForm">
       <h:panelGrid columns="1">
       <a4j:outputPanel ajaxRendered="true">
       <h:panelGrid columns="2">
       <h:panelGrid columns="3">
       <h:outputText value="Program Id"/>
       <h:outputText value="#{acadProgBean.currentObject.courseId}"/>
       <h:outputText value=" "/>
       <h:outputText value="Program Name" />
       <h:inputText value="#{acadProgBean.currentObject.courseName}" id="currentProgramName"
       validator="#{acadProgBean.validateInput}" maxlength="40"/>
       <rich:message for="currentProgramName" style="color: red;font-weight:bold">
       <f:facet name="errorMarker">
       <h:graphicImage value="../images/messages/error.gif" />
       </f:facet>
       </rich:message>
       <h:outputText value="Program Duration" />
       <h:inputText value="#{acadProgBean.currentObject.courseDuration}" id="currentCourseDuration" maxlength="2"/>
       <rich:message for="currentCourseDuration" style="color: red;font-weight:bold">
       <f:facet name="errorMarker">
       <h:graphicImage value="../images/messages/error.gif" />
       </f:facet>
       </rich:message>
       <h:outputText value="Sessions/year for Program" />
       <h:inputText value="#{acadProgBean.currentObject.semesterPerYear}" id="currentSessions" maxlength="2"/>
       <rich:message for="currentSessions" style="color: red;font-weight:bold">
       <f:facet name="errorMarker">
       <h:graphicImage value="../images/messages/error.gif" />
       </f:facet>
       </rich:message>
       </h:panelGrid>
       </h:panelGrid>
       </a4j:outputPanel>
       <a4j:commandButton value="Update"
       action="#{acadProgBean.update}"
       reRender="courseName,courseDuration,semesterPerYear"
       oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();" />
       </h:panelGrid>
       </h:form>
       </rich:modalPanel>
       </ui:define>
       </body>
       </ui:composition>
      


      Now I click on the update link in the 1st row, a modalPanel opens up.

      Then I put in some corrupt data in fields like a string in a number field, wrong Department value, etc. and click on the update button on the modalpanel. i get the general validation errors for the number field as
      INVALID NUMBER. whereas the wrong department hasnt been checked yet.
      Correct till now.
      Now I close the modal Panel and click on the update link of the 3rd row.

      The wrong value of the Department, i entered in the previous modalPanel, persists.
      I have tried a lot of things like clearing the modalPanel before it closes, clearing the BO, etc, but I havent been able to achieve success.

      I want that the modalPanel should pick the new values instead of the old values.

      Please Help.

        • 1. Re: rich:modalPanel data persistence issue
          nbelaevski
          • 2. Re: rich:modalPanel data persistence issue

            Hi Nick,

            the blog was pretty informative, thanks.

            I think I should be able to reset local value using Value Binding of inputText field

            However, when I tried it, I got into some other issue,

            <h:inputText required="true" value="#{acadProgBean.currentObject.courseId}" id="currentProgramId" label="Program Id"
             validator="#{acadProgBean.validateCourseId}" maxlength="10"/>
             <rich:message for="currentProgramId" style="color: red;font-weight:bold">
             <f:facet name="errorMarker">
             <h:graphicImage value="../images/messages/error.gif" />
             </f:facet>
             </rich:message>
             <h:outputText value="Program Name" />
             <h:inputText binding="#{acadProgBean.courseNameComponent}" required="true" value="#{acadProgBean.currentObject.courseName}" id="currentProgramName" label="Program Name"
             validator="#{acadProgBean.validateInput}" maxlength="40"/>
             <rich:message for="currentProgramName" style="color: red;font-weight:bold">
             <f:facet name="errorMarker">
             <h:graphicImage value="../images/messages/error.gif" />
             </f:facet>
             </rich:message>
            


            The first field without binding attribute displays as text field whereas the 2nd field doesn't render at all.
            As soon as I add the binding attribute to the 1st field, it stops working too.

            Please help,
            Maybe I am going wrong somewhere.

            i used the following getter/setter in bean
            /**
             * @return the courseNameComponent
             */
             public HtmlInputText getCourseNameComponent() {
             return courseNameComponent;
             }
             /**
             * @param courseNameComponent the courseNameComponent to set
             */
             public void setCourseNameComponent(HtmlInputText courseNameComponent) {
             this.courseNameComponent = courseNameComponent;
             }
            



            Akash

            • 3. Re: rich:modalPanel data persistence issue

              Hi,

              figured out the reason.

              same binding expression was being used at 2 places. The field is now being displayed correctly, however, the actual problem of old data in modalPanel still remains.

              I haven't been able to solve it even by setting the local and submitted value of component to null.

              Please help
              Akash

              • 4. Re: rich:modalPanel data persistence issue
                nbelaevski

                Akash,

                If you've reset local and submitted value, then EL expression should be the only place where the data can come from... I see a4j:keepAlive - binding components to keep-alived beans can cause problems - please try with the simple request-scoped bean.

                • 5. Re: rich:modalPanel data persistence issue

                  Hi Nick,

                  I removed a4j:keepAlive, and then cleared the components,

                  Well, the problem doesn't occur and the data does come from EL expression evaluation only, but the data on the page is lost as soon as I enter modalPanel.
                  Also, when I try to validate the modalPanel, if any validation error occurs, the outputText data is lost.

                  So, essentially, I would need to use a4j:keepAlive.

                  • 6. Re: rich:modalPanel data persistence issue
                    ilya_shaikovsky

                    You could use keepAlive for sure for your data objects, just make sure that view Objects separated from data Onjects and placed in request scoped beans.

                    • 7. Re: rich:modalPanel data persistence issue

                      The idea works fine to display the data on modalPanel,

                      but all the fields in the ViewObject which are not shown as input field on the modalPanel, get wiped off as soon as I click the update button the modalPanel.

                      So, I am having hard time retaining the complete Object.

                      Please help

                      Akash