OmniFaces阿賈克斯實用的updateColumn（）不更新號碼：dataTable的

Question

最近，我對OmniFaces Ajax.updateColumn問題（）在以下回答：

How to use OmniFaces Ajax.updateColumn() or Ajax.updateRow() via p:ajax

在這種情況下，數據表是JSF標準h：dataTable，而且效果很好。

現在，在這種情況下，當enduser通過p：dataTable之外存在的p：calendar組件選擇日期時，我試圖更新PrimeFaces p：dataTable。在p：dataTable的XHTML如下：

<p:dataTable id="flightDataTable" var="flight" 
      value="#{pf_flightController.flightsForOrder}"> 

    <p:column headerText="Airport" style="text-align: center !important;"> 
     <p:inputText value="#{flight.airportTx}" maxlength="25" size="10" label="Airport"/> 
    </p:column> 

    <p:column headerText="Airline" style="text-align: center !important;"> 
     <p:inputText value="#{flight.airlineTx}" maxlength="25" size="10" label="Airline"/> 
    </p:column> 

    <p:column headerText="Flight Number" style="text-align: center !important;"> 
     <p:inputText value="#{flight.flightNumber}" maxlength="8" size="10" label="Flight Number"/> 
    </p:column> 

    <p:column headerText="Type" style="text-align: center !important;"> 
     <h:selectOneMenu value="#{flight.flightType}" label="Flight Type"> 
      <f:selectItem itemValue="#{bundle.DropdownOptionValueArrive}" itemLabel="#{bundle.DropdownOptionLabelArrive}"/> 
      <f:selectItem itemValue="#{bundle.DropdownOptionValueDepart}" itemLabel="#{bundle.DropdownOptionLabelDepart}"/> 
     </h:selectOneMenu> 
    </p:column> 

    <p:column headerText="Date" style="text-align: center !important;"> 
     <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'N'}"> 
      <p:calendar value="#{flight.flightDate}" navigator="true" 
         label="Flight Date" 
         pattern="MM/dd/yyyy" size="10"> 
       <f:convertDateTime pattern="MM/dd/yyyy" /> 
      </p:calendar> 
     </h:panelGroup> 
     <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}"> 
      <p:inputText value="#{flight.flightDate}" 
         label="Flight Date" type="date"> 
       <f:convertDateTime pattern="yyyy-MM-dd" /> 
      </p:inputText> 
     </h:panelGroup> 
    </p:column> 

    <p:column headerText="Time" style="text-align: center !important;"> 
     <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'N'}"> 
      <pe:timePicker value="#{flight.flightTime}" 
          label="Flight Time" mode="popup" 
          showPeriod="true" style="width: 80px;"> 
       <f:convertDateTime pattern="hh:mm a" /> 
      </pe:timePicker> 
     </h:panelGroup> 
     <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}"> 
      <p:inputText value="#{flight.flightTime}" 
         label="Flight Time" type="time"> 
       <f:convertDateTime pattern="HH:mm" /> 
      </p:inputText> 
     </h:panelGroup> 
    </p:column> 

</p:dataTable> 

原來，目前在生產中，號碼：日曆號碼：阿賈克斯更新= 「...」 更新 '整個' 航班號碼：dataTable的，所以日期列在p：dataTable中更新成功。我知道，如果它沒有損壞，那麼不要修復它，但是今天我正在修改這個代碼和xhtml，所以我想使用OmniFaces Ajax實用程序的updateColumn（）來更新所有的'one'列此PrimeFaces p：dataTable的行。

下面是當enduser通過p：calendar選擇日期時執行的代碼片段;這是調用OmniFaces Ajax實用程序的updateColumn（）的代碼。

private void updateFlightDateOnAdd() { 
    flightController.updateFlightDateOnAdd(current.getTripDateTime()); 

    UIData flightsDataTable = null; 
    try { 
     flightsDataTable = (UIData) Components.findComponent(":orderAddForm:flightDataTable"); 
    } catch (Exception e) { 
     System.out.println("pf_OrdersController.updateFlightDateOnAdd(): caught exception on Components.findComponent(...)"); 
    } 
    if (flightsDataTable != null) { 
     System.out.println("pf_OrdersController.updateFlightDateOnAdd(): Components.findComponent(...) found " + flightsDataTable.getClientId()); 
     Ajax.updateColumn(flightsDataTable, 4); 
    } 
    else { 
     System.out.println("pf_OrdersController.updateFlightDateOnAdd(): Components.findComponent(...) returned null"); 
    } 
} 

下面是POJO定義：

public class FlightForOrder { 
    private Integer flightId; 
    private String airportTx, airlineTx, flightNumber; 
    private Character flightType; 
    private Date flightDate, flightTime; 

    public FlightForOrder() { 

    } 

    public Integer getFlightId() { 
     return flightId; 
    } 

    public void setFlightId(Integer flightId) { 
     this.flightId = flightId; 
    } 

    public String getAirportTx() { 
     return airportTx; 
    } 

    public void setAirportTx(String airportTx) { 
     this.airportTx = airportTx; 
    } 

    public String getAirlineTx() { 
     return airlineTx; 
    } 

    public void setAirlineTx(String airlineTx) { 
     this.airlineTx = airlineTx; 
    } 

    public Date getFlightDate() { 
     return flightDate; 
    } 

    public void setFlightDate(Date flightDate) { 
     this.flightDate = flightDate; 
    } 

    public String getFlightNumber() { 
     return flightNumber; 
    } 

    public void setFlightNumber(String flightNumber) { 
     this.flightNumber = flightNumber; 
    } 

    public Date getFlightTime() { 
     return flightTime; 
    } 

    public void setFlightTime(Date flightTime) { 
     this.flightTime = flightTime; 
    } 

    public Character getFlightType() { 
     return flightType; 
    } 

    public void setFlightType(Character flightType) { 
     this.flightType = flightType; 
    } 

    @Override 
    public int hashCode() { 
     int hash = 3; 
     hash = 97 * hash + Objects.hashCode(this.flightId); 
     return hash; 
    } 

    @Override 
    public boolean equals(Object obj) { 
     if (obj == null) { 
      return false; 
     } 
     if (getClass() != obj.getClass()) { 
      return false; 
     } 
     final FlightForOrder other = (FlightForOrder) obj; 
     if (!Objects.equals(this.flightId, other.flightId)) { 
      return false; 
     } 
     return true; 
    } 

} 

測試時，下面的服務器日誌出現了：

INFO: pf_OrdersController.updateFlightDateOnAdd(): Components.findComponent(...) found orderAddForm:flightDataTable 

因此，這意味着我得到了很好的參考PrimeFaces p：dataTable，所以我將類型爲UIData的組件傳遞給了Ajax.updateColumn（）。

最終結果是，PrimeFaces dataTable沒有被OmniFaces Ajax實用程序的updateColumn（）更新。

我剛剛註釋掉了Ajax.updateColumn（...）並重新將update =「...」添加到p：calendar p：ajax中，並且PrimeFaces dataTable已成功更新。

請告訴我可能需要做些什麼來確保PrimeFaces dataTable通過Ajax.updateColumn（...）更新。謝謝。

Answer 1

通過

<p:column headerText="Date" style="text-align: center !important;"> 
    <p:calendar value="#{flight.flightDate}" navigator="true" 
       label="Flight Date" 
       pattern="MM/dd/yyyy" size="10" 
       rendered="#{pf_usersController.loggedInViaAndroid == 'N'}"> 
     <f:convertDateTime pattern="MM/dd/yyyy" /> 
    </p:calendar> 
    <p:inputText value="#{flight.flightDate}" 
       label="Flight Date" type="date" 
       rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}"> 
     <f:convertDateTime pattern="yyyy-MM-dd" /> 
    </p:inputText> 
</p:column> 

更換

<p:column headerText="Date" style="text-align: center !important;"> 
    <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'N'}"> 
     <p:calendar value="#{flight.flightDate}" navigator="true" 
        label="Flight Date" 
        pattern="MM/dd/yyyy" size="10"> 
      <f:convertDateTime pattern="MM/dd/yyyy" /> 
     </p:calendar> 
    </h:panelGroup> 
    <h:panelGroup rendered="#{pf_usersController.loggedInViaAndroid == 'Y'}"> 
     <p:inputText value="#{flight.flightDate}" 
        label="Flight Date" type="date"> 
      <f:convertDateTime pattern="yyyy-MM-dd" /> 
     </p:inputText> 
    </h:panelGroup> 
</p:column> 

應該修復它。

說明：Ajax#updateColumn()僅將直接子女的客戶端ID添加到PartialViewContext#getRenderIds()。然而，<h:panelGroup>沒有任何屬性會導致產生的HTML輸出，如id，不會在HTML輸出中顯示任何內容。因此，JS/Ajax無法找到<h:panelGroup>的HTML表示以更新它。

此修復程序使表單元格的具體內容直接子代替，這樣JS/Ajax將能夠找到並替換它們。另一種方法是給這些專家小組一個具體的id，但這在這個結構中是不必要的。