1 Reply Latest reply on Feb 15, 2008 1:40 PM by achildress

    modal panel closing even if validation fails

    achildress

      I 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?