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