rich:modalPanel data persistence issue
asingla4 Aug 23, 2009 11:38 AMHi,
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.