I am trying to use wizard with Primefaces (ViewScoped) . I created the page with 4 tabs. After navigating first tab, user reaches second tab and user enters some values to the input text fields at this second tab page. When the user goes the previous or next tab from second tab and comes back to this second tab all the entered values are lost except first tab. Also validations are not working except first tab.Is there a solution for this problem? Here is my html code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
template="template/template.xhtml">
<ui:define name="body">
<h:graphicImage value="resources/myimage.jpg" />
<!-- First Tab -->
<h:form id="form">
<p:growl id="growl" sticky="true" showDetail="true"/>
<p:wizard flowListener="#{myView.onFlowProcess}" widgetVar="wiz">
<p:tab id="person" title="PERSON">
<p:panel header="">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="NAME :" />
<p:inputText value="#{myView.user.firstname}" label="Name" validatorMessage="NAME ERROR">
<f:validateRegex pattern="[a-zA-Z]{2,50}+"/>
</p:inputText>
<h:outputText value="SURNAME: *" />
<p:inputText value="#{myView.user.lastname}" label="Surname" validatorMessage="SURNAME ERROR">
<f:validateRegex pattern="[a-zA-Z]{2,60}+"/>
</p:inputText>
<h:outputText value="obligatory" style="color:red;"/>
</h:panelGrid>
</p:panel>
</p:tab>
<!-- ADDRESS -->
<p:tab id="address" title="ADDRESS">
<p:panel header="">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="cellular Phone" />
<p:inputMask id="cellularPhone" value="#{myView.user.cellularPhone}" mask="59999999999" required="true" requiredMessage="CELLULAR PHONE CANNOT BE EMPTY"/>
<h:outputText value="Cellular Phone :" style="color:red;" />
<h:outputText value="" />
<h:outputText value="Email :" />
<p:inputText value="#{myView.user.email}" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="country" value="country" />
<p:selectOneMenu id="country" value="#{dropDownView.country}" style="width:150px">
<p:ajax listener="#{dropDownView.onCountryChange}" update="city" />
<f:selectItem itemLabel="please Select" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropDownView.countries}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="city" />
<p:selectOneMenu id="city" value="#{dropDownView.city}" style="width:150px">
<f:selectItem itemLabel="please Select" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{dropDownView.cities}" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
<h:outputText value="obligatory" style="color:red;"/>
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="PAYMENT">
<p:panel header="">
<p:commandButton value="SAVE" action="#{myView.save}" update="growl" oncomplete="wiz.next();" process="@this" validateClient="true"/>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</ui:define>
</ui:composition>