modal panel closing even if validation fails
achildress Feb 14, 2008 2:53 PMI tried to model some modal panel validation behavior after the example shown in the wiki (http://labs.jboss.com/wiki/ModalPanelValidation). I have some subtle differences, but I just can't figure out why the example seems to work and my version doesn't. I have an a4j:commandLink on a page that opens a modal panel. The modal panel contains an a4j:include of a page with a form that must be validated when submitted. I want the modal panel to stay open if the form does not validate. I used the same mechanism described in the wiki to do this, and check the h:messages component for null before doing the modal panel hide. When validation fails, the modal panel still closes, as the h:messages component is shown as null (in the js alert I put in to see what errors contained) for some strange reason even though the validation errors displayed. BUT, if I open the page with the form (that was included in the modal panel) by itself, and do the validation so it fails, the h:messages component is not null and the desired behavior (in theory) would be achieved.
Here is the page code that opens the modal panel:
<ui:composition 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" xmlns:u="http:/jsf.exadel.com/template/util" > <link rel="stylesheet" type="text/css" media="all" href="#{facesContext.externalContext.requestContextPath}/css/default.css"/> <rich:panel style="width: 100%; height: 500px;"> <h:form id="procschedarr"> <f:facet name="header">Process Scheduled Arrivals</f:facet> <h:panelGrid columns="2" style="margin-top: 10px;"> <h:outputLabel styleClass="stdLabel" for="diagFacCombo" value="Facility: "/> <h:selectOneListbox size="1" id="diagFacCombo" value="#{DOPIntakeScheduledArrivalsBean.facilityID}"> <f:selectItems value="#{CodeCacheBean.getCodes('diagFacilityCode')}"/> </h:selectOneListbox> <h:outputLabel styleClass="stdLabel" value="Scheduled Arrival Date Range: "/> <h:panelGrid columns="3"> <rich:calendar id="dateRangeStart" value="#{DOPIntakeScheduledArrivalsBean.dateRangeStart}" datePattern="MM/dd/yyyy"></rich:calendar> <h:outputLabel styleClass="stdLabel" value=" To: "/> <rich:calendar id="dateRangeEnd" value="#{DOPIntakeScheduledArrivalsBean.dateRangeEnd}" datePattern="MM/dd/yyyy"></rich:calendar> </h:panelGrid> </h:panelGrid> <rich:panel style="margin-top: 10px;"> <f:facet name="header">Scheduled Arrivals</f:facet> <rich:datascroller for="offenderList" style="margin-top: 6px; text-align: center; background-color: #c6c6c6;"></rich:datascroller> <rich:dataGrid style="height: 350px;" id="offenderList" value="#{DOPIntakeScheduledArrivalsBean.preArrivalOffenders}" var="PreArrivalOffenderBean" columns="1" elements="2"> <rich:panel style="width: 600px;"> <f:facet name="header"> <h:outputText value="#{PreArrivalOffenderBean.offenderName}" styleClass="stdLabelLight"></h:outputText> </f:facet> <table> <tr> <td align="right" width="10%"><h:outputText value="DOC#:" styleClass="tableLabel"/></td> <td align="left" width="20%"><h:outputText value="#{PreArrivalOffenderBean.offenderID}" styleClass="tableText"/></td> <td align="right" width="20%"><h:outputText value="Scheduled Arrival Date:" styleClass="tableLabel"/></td> <td align="left" width="20%"><h:outputText value="#{PreArrivalOffenderBean.scheduledArrivalDate}" styleClass="tableText"><f:convertDateTime pattern="MM/dd/yyyy"/></h:outputText></td> <td align="left" width="20%" rowspan="5" valign="top"> <rich:dataGrid id="taskList" value="#{PreArrivalOffenderBean.tasks}" var="PreArrivalTaskBean" columns="1" elements="3"> <f:facet name="header"> <h:outputText value="Pending Tasks" styleClass="stdLabel"></h:outputText> </f:facet> <a4j:commandLink limitToList="true" action="#{DOPIntakeScheduledArrivalsBean.selectOffender(PreArrivalOffenderBean,PreArrivalTaskBean)}" reRender="confirm" rendered="#{PreArrivalTaskBean.isTaskConfirm}" oncomplete="${PreArrivalTaskBean.taskURL}" styleClass="linkText" value="#{PreArrivalTaskBean.taskName}"/> <a4j:commandLink limitToList="true" reRender="maincontent" styleClass="linkText" rendered="#{PreArrivalTaskBean.isTaskAction}" value="#{PreArrivalTaskBean.taskName}"> <a4j:actionparam name="selectedURL" value="#{PreArrivalTaskBean.taskURL}" assignTo="#{DOPIntakeMenuBean.selectedURL}"/> </a4j:commandLink> </rich:dataGrid> </td> </tr> <tr> <td align="right"><h:outputText value="County:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.convictionCountyDisplay}" styleClass="tableText"/></td> <td align="right"><h:outputText value="Offense Type:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.primaryFelonyMisdemeanorDisplay}" styleClass="tableText"/></td> </tr> <tr> <td align="right"><h:outputText value="Gender:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.genderDisplay}" styleClass="tableText"/></td> <td align="right"><h:outputText value="Sentence Length:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.sentenceLengthDisplay}" styleClass="tableText"/></td> </tr> <tr> <td align="right"><h:outputText value="Race:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.raceDisplay}" styleClass="tableText"/></td> <td align="right"><h:outputText value="Spec Char:" styleClass="tableLabel"/></td> <td align="left"><h:outputText value="#{PreArrivalOffenderBean.specialCharacteristicsDisplay}" styleClass="tableText"/></td> </tr> <tr> <td align="right"><h:outputText value="Birth Date:" styleClass="tableLabel"/></td> <td align="left" colspan="3"><h:outputText value="#{PreArrivalOffenderBean.birthDate}" styleClass="tableText"><f:convertDateTime pattern="MM/dd/yyyy" /></h:outputText></td> </tr> </table> </rich:panel> </rich:dataGrid> </rich:panel> </h:form> </rich:panel> <rich:modalPanel id="dci" minHeight="200" minWidth="450" height="200" width="500" zindex="2000"> <f:facet name="header"> <h:outputText value="Mark DCI Search Complete" /> </f:facet> <f:facet name="controls"> <h:graphicImage value="/images/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('dci')" /> </f:facet> <a4j:outputPanel ajaxRendered="true" id="confirm"> <a4j:include viewId="\dcitaskconfirm.xhtml"/> </a4j:outputPanel> </rich:modalPanel> <script> function getRightTop(ref) { var position = new Object(); position.top = 0; //ref.offsetTop; position.left =0; // ref.offsetLeft+ref.clientWidth+6; return position; } </script> </ui:composition>
And here is the page code for the included dcitaskconfirm.xhtml:
<ui:composition 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" xmlns:u="http:/jsf.exadel.com/template/util"> <a4j:form id="mpform"> <table width="100%" align="center"> <tr> <td colspan="2" class="stdLabel" align="center"> <h:outputText value="Mark DCI Search Complete For #{DOPIntakeScheduledArrivalsBean.selectedOffender.offenderName} (#{DOPIntakeScheduledArrivalsBean.selectedOffender.offenderID})" styleClass="stdLabel" /> </td> </tr> <tr> <td align="right"> <h:outputLabel styleClass="stdLabel" for="diagEmpCombo" value="Task Completed By: " /> </td> <td align="left"> <h:selectOneMenu id="diagEmpCombo" required="true" value="#{DOPIntakeScheduledArrivalsBean.selectedTask.confirmStaff}"> <f:selectItems value="#{ShallowEmployeeBean.getDiagnosticEmployees(DOPIntakeScheduledArrivalsBean.facilityID)}" /> </h:selectOneMenu> </td> </tr> <tr> <td align="right"> <h:outputText value="Date Task Completed" styleClass="stdLabel" /> </td> <td align="left"> <rich:calendar required="true" id="confirmDate" value="#{DOPIntakeScheduledArrivalsBean.selectedTask.confirmDate}" datePattern="MM/dd/yyyy"></rich:calendar> </td> </tr> <tr> <td align="center" colspan="2"> <a4j:commandLink reRender="test" value="Save" oncomplete="windowclose();" /> </td> </tr> <tr> <td colspan="2"> <a4j:outputPanel ajaxRendered="true"> <h:messages id="error"></h:messages> </a4j:outputPanel> </td> </tr> </table> <script> function windowclose(){ alert("mpform:error" + document.all('mpform:error')); if (document.all('mpform:error')==null){ Richfaces.hideModalPanel('dci'); }; }; </script> </a4j:form> </ui:composition>
Does anybody see what could be wrong here? At first I thought maybe something fubar'd the form and thus made the check of mpform:error not return the actual DOM element displaying the errors.
I actually created a page in my project and dropped the exact code from the wiki in it and it works just fine, so I fail to see what the disconnect is. Why would the page work just fine by itself, but not work when run inside the modal panel on a parent page?