JSF 단일 관리 Bean이있는 다중 데이터 테이블

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도 정보를 표시합니다.

그러나 다음을 클릭하면 필수 필드 메시지가 표시되고 다음 페이지로 이동할 수 없습니다.

다음에 클릭하면 moveToNextPage와 같은 관리 빈에서 메소드를 실행하고 싶다.

모든 아이디어가 감사하겠습니다.

Answer 1

상단 패널 그리드의 각 입력 텍스트에 대해 <h:message> 태그가 있습니다. 따라서 기본적으로 <f:ajax>은 render = "@ this"를 실행하고 "@ 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>