JSF multiple data tables with single managed bean - jsf

Question

Updating the question to below:
Please see attached code.
<h:form id="tblForm" styleClass="formTblClass">
<h3 style="text-align: center; background-color: purple; color: white;">Contact Details</h3>
<h:panelGrid id="contactPanel" columns="3">
<h:outputLabel for="roleIn" value="Role: " />
<h:selectOneMenu id="roleIn" value="#{docHeader.roleIn}" required="true" requiredMessage="Please select one from dropdown.">
<f:selectItem itemLabel="--Select--" noSelectionOption="true"/>
<f:selectItems value="#{docHeader.listOfRoles}"/>
</h:selectOneMenu>
<h:message for="roleIn" style="color: red;"/>
<h:outputLabel for="empIdIn" value="Employee ID: " />
<h:inputText id="empIdIn" value="#{docHeader.empId}" required="true" requiredMessage="Please enter valid employee id">
<f:ajax listener="#{docHeader.fetchEmpDetails}" render="empName workPhone emailId" />
</h:inputText>
<h:message for="empIdIn" style="color: red;"/>
<h:outputLabel for="empName" value="Name: " />
<h:inputText id="empName" readonly="true" value="#{docHeader.empName}" /><br/>
<h:outputLabel for="workPhone" value="Work Phone: " />
<h:inputText id="workPhone" readonly="true" value="#{docHeader.workPhone}" /><br/>
<h:outputLabel for="emailId" value="Email ID: " />
<h:inputText id="emailId" readonly="true" value="#{docHeader.emailId}" /><br/>
</h:panelGrid>
<h:commandButton value="Add">
<f:ajax event="click" listener="#{docHeader.addContactToList}"
render="contactPanel contactTable" execute="#this contactPanel" />
</h:commandButton>
<h:dataTable id="contactTable" value="#{docHeader.contactList}"
var="contact" headerClass="list-header" rowClasses="list-row" columnClasses="list-column-center" border="1" width="100%">
<h:column>
<f:facet name="header">Role</f:facet>#{contact.roleIn}
</h:column>
<h:column>
<f:facet name="header">Employee ID</f:facet>#{contact.empId}
</h:column>
<h:column>
<f:facet name="header">Employee Name</f:facet>#{contact.empName}
</h:column>
<h:column>
<f:facet name="header">Work Phone</f:facet>#{contact.workPhone}
</h:column>
<h:column>
<f:facet name="header">Email ID</f:facet>#{contact.emailId}
</h:column>
</h:dataTable>
<div style="text-align: center">
<h:commandButton value="Next">
<f:ajax event="click" render="none" listener=""/>
</h:commandButton>
</div>
</h:form>
From above code, addtoContactList is working absolutely fine and the contactTable is displaying the information too.
But when clicked on NEXT i'm getting required field messages and not able to navigate to the next page.
When clicked next i want execute a method in managed bean like moveToNextPage.
Any Ideas appreciated.

Answer 1

You have <h:message> tag for each inputText in the upper panelGrid. So by default <f:ajax> does the following render="#this" and execute="#this". You need to change like below:
<h:panelGrid id="myPanel" columns="3">
<h:outputLabel for="wrNum" value="ITG/WR #: " />
<h:inputText id="wrNum" required="true" value="#{docHeader.wrNum}" requiredMessage="Please enter ITG/WR #."/>
<h:message for="wrNum"/>
<h:outputLabel for="wrDesc" value="ITG/WR Description: " />
<h:inputText id="wrDesc" required="true" value="#{docHeader.wrDesc}" requiredMessage="Please enter ITG/WR Description"/>
<h:message for="wrDesc"/>
</h:panelGrid>
<h:commandButton value="Add" immediate="true">
<f:ajax event="click" listener="#{docHeader.addWrReqInfoToList}" render="myPanel workReqInfoTbl" execute="#this myPanel"/>
</h:commandButton>
<h:dataTable id="workReqInfoTbl" value="#{docHeader.workReqInfoList}" var="wrReqInfo" style="border: red solid 1px;">
</h:dataTable>