0 Replies Latest reply on Jun 17, 2008 10:31 AM by Anne Childress

    tabPanel validates wrong tab on new tab selection

    Anne Childress Newbie

      I have a tabPanel with switchType="ajax" with an a4j:form around the entire tabPanel. I have ontableave set on each tab to submit the form using a jsFunction for validation to ensure that all required validation edits are passed on the tab before allowing the user to proceed to the newly selected tab. Everything works fine, but only if the user selects a new tab to the right of the currently selected one. If they select a tab to the left of the currently selected one, the validation is performed for the new tab selected, not the currently selected one. In the following code, for example, if the user is currently viewing the "family" tab, and tries to select the "identification" tab, the validation for the "identification" tab is performed, when it should be the validation for the "family" tab. Since the "identification" tab form data is not present at the time, required validation edits fail (thus how I discovered that this was even happening). What could possibly be wrong here?

       <a4j:form id="interviewform">
       <a4j:jsFunction status="savestatus" name="saveData" limitToList="true" actionListener="#{DOPIntakeAdminTechInterviewBean.saveInterview}" reRender="myerrors">
       </a4j:jsFunction>
       <h:inputHidden value="#{DOPIntakeAdminTechInterviewBean.reInit}"></h:inputHidden>
       <a4j:outputPanel ajaxRendered="true" id="myerrors">
       <table>
       <tr>
       <td><h:outputLabel styleClass="stdLabel" value="The following errors have occurred. Please fix them and save again." /></td>
       </tr>
       </table>
       <rich:messages id="error" layout="list" styleClass="stdLabel">
       <f:facet name="errorMarker">
       <h:graphicImage value="/images/failed.gif" />
       </f:facet>
       </rich:messages>
       </a4j:outputPanel>
       <table cellpadding="0" cellspacing="0">
       <tr>
       <td align="center">
       <h:inputHidden id="dirty" binding="#{IntakeOffenderBean.hiddenDirty}"></h:inputHidden>
       <a4j:commandButton status="savestatus" id="saveButton" value="Save Interview" oncomplete="javascript:showErrors();" actionListener="#{DOPIntakeAdminTechInterviewBean.saveInterview}" reRender="myerrors"/>
       <a4j:status forceId="true" id="savestatus" onstart="Richfaces.showModalPanel('saveprogressmp',{width:450, top:200})" onstop="Richfaces.hideModalPanel('saveprogressmp')" />
       <h:graphicImage id="waiterrors" url="/images/waitforerrors.gif" style="display: none;"></h:graphicImage>
       </td>
       </tr>
       </table>
       <rich:spacer height="4px"></rich:spacer>
       <rich:tabPanel id="admintechinterviewtabs" switchType="ajax" style="width: 96%;" binding="#{DOPIntakeAdminTechInterviewBean.adminTechTabs}">
       <rich:tab ontableave="saveData()" id="identification" label="Identification">
       <ui:include src="\interviewidentification.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="family" label="Family">
       <ui:include src="\interviewfamily.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="demographics" label="Demographics">
       <ui:include src="\blankpage.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="educationjobs" label="Education/Employment">
       <ui:include src="\blankpage.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="stg" label="STG">
       <ui:include src="\blankpage.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="criminalhistory" label="Criminal History">
       <ui:include src="\blankpage.xhtml"/>
       </rich:tab>
       <rich:tab ontableave="saveData()" id="complete" label="Mark Complete">
       <ui:include src="\blankpage.xhtml"/>
       </rich:tab>
       </rich:tabPanel>
       <h:inputHidden id="maximumSeverity" rendered="#{! empty facesContext.maximumSeverity}" value="#{facesContext.maximumSeverity.ordinal}" />
       </a4j:form>
      


      I've tried all sorts of variations of switchType (both at the tabPanel level and at the tab level), but to no avail. I was under the impression that when switchType is ajax, that only the form data on currently selected tab is actually present, and therefore is the only form data that will be transmitted for validation.

      Can somebody please help? I would really like to use rich:tabPanel, but I will have to switch to myfaces or something else if I can't get this to work.