帶有單個託管bean的JSF多個數據表格

Question

將問題更新到以下位置：

請參閱附加代碼。

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

從上面的代碼，addtoContactList工作得很好，contactTable也顯示信息。

但是，當點擊NEXT我得到必填字段消息，無法導航到下一頁。

當點擊下一步，我想執行託管bean中的方法，如moveToNextPage。

任何想法讚賞。

Answer 1

您對上面的panelGrid中的每個inputText都有<h:message>標記。因此，默認<f:ajax>會執行以下render =「@ this」和execute =「@ this」。你需要改變如下：

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