중첩 컨트롤 내에서 PrimeFaces datatable을 업데이트 하시겠습니까?

Question

저는 JSF와 PrimeFaces를 처음 접했습니다. 중첩 된 요소 내에서 내 datatable을 업데이트하려고합니다. 이 시점에서 내가 시도한 모든 것은 페이지를 깨뜨렸거나 실패했습니다. 다음은 마크 업입니다.

<h:form id="form2"> 
     <p:growl id="msgs" sticky="true" showDetail="true" autoUpdate="true" /> 
     <ui:insert name="content"> 
       <ezcomp:header /> 
       <p:layout> 
        <p:layoutUnit position="west" > 
         <ezcomp:navigation /> 
        </p:layoutUnit> 
        <p:layoutUnit position="center" > 
         <p:wizard widgetVar="wiz"> 
          <p:tab id="flightInformation" title="General"> 
           <p:panel header="Flight Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 

             <p:outputLabel>Aircraft Name: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.aircraftName}" required="true" label="Aircraft Name"></p:inputText> 
             <p:outputLabel>Airline Name: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.airlineName}" required="true" label="Airline Name"></p:inputText> 
             <p:outputLabel>Flight Number: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.flightNumber}" required="true" label="Flight Number"></p:inputText> 
             <p:outputLabel>Duration: </p:outputLabel> 
             <p:inputMask value="#{flightWizard.flightMB.flight.flightTime}" mask="99:99" placeholder="HH:MM" required="true" label="Flight Duration"></p:inputMask> 
             <p:outputLabel>Base Price: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.basePrice}" required="true" label="Base Price"></p:inputText> 
            </h:panelGrid> 
           </p:panel> 

          </p:tab> 
          <p:tab id="arrivalInfo" title="Departure And Arrival"> 
           <p:panel header="Departure And Arrival Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 
             <p:outputLabel>Departure Airport: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.departureAirport}" required="true" label="Departure Airport"></p:inputText> 
             <p:outputLabel>Departure Airport Code: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.departureAirportCode}" required="true" maxlength="3" label="Departure Airport Code"></p:inputText> 
             <p:outputLabel>Departure Date and Time: </p:outputLabel> 
             <p:calendar value="#{flightWizard.flightMB.flight.departure}" pattern="dd.MM.yyyy HH:mm" required="true" label="Departure Date and Time" /> 
             <p:outputLabel>Arrival Airport: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.arrivalAirport}" required="true" label="Arrival Airport"></p:inputText> 
             <p:outputLabel>Arrival Airport Code: </p:outputLabel> 
             <p:inputText value="#{flightWizard.flightMB.flight.arrivalAirportCode}" required="true" maxlength="3" label="Arrival Airport Code"></p:inputText> 
             <p:outputLabel>Arrival Date and Time: </p:outputLabel> 
             <p:calendar value="#{flightWizard.flightMB.flight.arrival}" pattern="dd.MM.yyyy HH:mm" required="true" label="Arrival Date and Time"/> 


            </h:panelGrid> 
           </p:panel> 
          </p:tab> 
          <p:tab id="seatingInfo" title="Seating"> 
           <p:panel header="Seating Information"> 
            <p:messages /> 
            <h:panelGrid columns="2" columnClasses="label, value"> 
             <p:outputLabel>Economy</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.economyClassSeats}" required="true" label="Total Economy Seats" /> 
             <p:outputLabel>Business</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.businessClassSeats}" required="true" label="Total Business Seats" /> 
             <p:outputLabel>First Class</p:outputLabel> 
             <p:spinner value="#{flightWizard.flightMB.flight.firstClassSeats}" required="true" label="Total First Class Seats" /> 
            </h:panelGrid> 
           </p:panel>     
          </p:tab> 
          <p:tab id="confirmation" title="Confirmation"> 
           <p:panel header="Confirm Flight"> 
            <p:messages /> 

            <p:dataGrid value="#{flightWizard.flightMB.flight}" var="f" columns="2"> 
             <div style="width:50%;"> 
              <h:panelGrid columns="2" > 
               <p:outputLabel>Aircraft Name: </p:outputLabel> 
               <h:outputText value="#{f.aircraftName}"></h:outputText> 
               <p:outputLabel>Airline Name: </p:outputLabel> 
               <h:outputText value="#{f.airlineName}" ></h:outputText> 
               <p:outputLabel>Flight Number: </p:outputLabel> 
               <h:outputText value="#{f.flightNumber}" ></h:outputText> 
               <p:outputLabel>Duration: </p:outputLabel> 
               <h:outputText value="#{f.flightTime}"></h:outputText> 
               <p:outputLabel>Base Price: </p:outputLabel> 
               <h:outputText value="#{f.basePrice}"></h:outputText> 

               <p:outputLabel>Arrival Airport: </p:outputLabel> 
               <h:outputText value="#{f.arrivalAirport}" ></h:outputText> 
               <p:outputLabel>Arrival Airport Code: </p:outputLabel> 
               <h:outputText value="#{f.arrivalAirportCode}" ></h:outputText> 
               <p:outputLabel>Arrival Date and Time: </p:outputLabel> 
               <h:outputText value="#{f.arrival}" /> 

               <p:outputLabel>Departure Airport: </p:outputLabel> 
               <h:outputText value="#{f.departureAirport}" ></h:outputText> 
               <p:outputLabel>Departure Airport Code: </p:outputLabel> 
               <h:outputText value="#{f.departureAirportCode}" ></h:outputText> 
               <p:outputLabel>Departure Date and Time: </p:outputLabel> 
               <h:outputText value="#{f.departure}" /> 

               <p:outputLabel>Economy: </p:outputLabel> 
               <h:outputText value="#{f.economyClassSeats}" ></h:outputText> 
               <p:outputLabel>Business: </p:outputLabel> 
               <h:outputText value="#{f.businessClassSeats}" ></h:outputText> 
               <p:outputLabel>First Class: </p:outputLabel> 
               <h:outputText value="#{f.firstClassSeats}" ></h:outputText> 
              </h:panelGrid> 
             </div> 

             <p:commandButton value="Add To Submission" ajax="true" action="#{flightWizard.addAnother(f)}" oncomplete="PF('wiz').loadStep('flightInformation',false)" /> 
            </p:dataGrid> 
           </p:panel>   

          </p:tab> 
         </p:wizard> 
        </p:layoutUnit> 
        <p:layoutUnit id='submissionUnit' position="east" size='40%' > 
         <p:dataTable id='submissionTable' var="x" value="#{flightWizard.flightMB.flights}" rowIndexVar="rowIndex"> 
          <p:column style="font-size:0.8em;" headerText="Flight Number"> 
           <h:outputText value="#{x.flightNumber}" /> 
          </p:column> 
          <p:column style="font-size:0.8em;" headerText="Arrival Code"> 
           <h:outputText value="#{x.arrivalAirportCode}" /> 
          </p:column> 
          <p:column style="font-size:0.8em;" headerText="Arrival"> 
           <h:outputText value="#{x.arrival}" /> 
          </p:column>          
          <p:column style="font-size:0.8em;" headerText="Departure Code"> 
           <h:outputText value="#{x.departureAirportCode}" /> 
          </p:column> 

          <p:column style="font-size:0.8em;" headerText="Departure"> 
           <h:outputText value="#{x.departure}" /> 
          </p:column>          
          <p:column style="font-size:0.8em;" headerText="Edit"> 
           <p:commandButton value="Edit" action="#{flightWizard.flightMB.changeFlightByIndex(rowIndex)}" oncomplete="PF('wiz').loadStep('flightInformation',false)"/> 
          </p:column> 
         </p:dataTable>  
         <br/> 
         <p:commandButton value="Submit" immediate="true" disabled="#{flightWizard.flightMB.flights.size()==0?true:false}" action="#{flightBean.insertFlight(flightWizard.flightMB.flights)}"/> 
        </p:layoutUnit> 
       </p:layout>     
     </ui:insert> 

두 번째 레이아웃 단위의 데이터 테이블을 명령 단추를 통해 세 번째 레이아웃 단위로 업데이트하려고합니다.

나는 명령 단추의 업데이트 속성을 사용하여 시도했지만 마법사가 작동하지 않는 것으로 나타나며 해당 탭을 입력 할 수 없습니다. 이 시점에서

public void addAnother(Flight f){ 
    flightMB.addFlightToCreate(f); 
    flightMB.setFlight(new Flight()); 
    RequestContext reqCtx = RequestContext.getCurrentInstance(); 
    // reqCtx.update("form2:submissionUnit"); 
    reqCtx.update("form2:layoutUnit"); 

} 

어떤 도움을 주시면 감사하겠습니다 :

나는 또한과 같이 빈에서 그것을 업데이트 시도했습니다.

Answer 1

p:layoutUnit 전체를 업데이트하는 대신 Datatable을 업데이트하거나 h:panelGroup을 넣고 업데이트 할 수 있습니다.

@XHTML :

<h:form id="form1"> 
<p:layoutUnit id='submissionUnit'> 
<h:panelGroup id="tablePG"> 
<p:dataTable id='submissionTable'> 
... 
</p:dataTable> 
</h:panelGroup> 
</p:layoutUnit> 
</h:form> 

@ManagedBean :

RequestContext.getCurrentInstance().update("form1:tablePG"); 

그리고 RequestContext를 사용하여 ManagedBean에서 구성 요소를 업데이트하는 동안 당신이 당신의 구성 요소 ID의 시작 부분에 :를 제공 할 필요는 없습니다 .