f：ajax無法呈現h：selectManyListbox

Question

將f:ajax組件與h:selectManyListbox ，會觸發偵聽器方法，但不會刷新呈現列表。

我有市場。 當我選擇市場時，它需要顯示子市場。 初始頁面加載將包含所有市場和子市場，但是當用戶選擇“市場”時需要對其進行過濾。

使用以下代碼：

   <ui:fragment id="uda2" rendered="#{udaList.index eq 1}">
   <div class=" row form-group" >                               
   <label class="col-sm-2" for="sel-service">Market:</label>
   <div class="col-sm-10">
          <h:selectManyListbox style="width:360px;"   multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
             disabled="#  {licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA2)}" 
          id="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}" size="1" 
          name="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}"
        value="#{licenseSelectionBean.selectedItemUda2}"                                            
        styleClass="sel-chosen">

        <f:selectItems var="uda2"
            value="#{licenseSelectionBean.selectUda2}" />
        <f:ajax event="change" execute="@this" render="@this udalist3" 
                listener="#{licenseSelectionBean.onChangeFilter()}" /> 
    </h:selectManyListbox>  
  </div>                                

  </div>
  </ui:fragment>
<ui:fragment rendered="#{udaList.index eq 2}">
<div class="row form-group" >                           
<label class="col-sm-2" for="sel-service">Sub-Market:</label>
<div class="col-sm-10">
      <h:selectManyListbox style="width:360px;"   multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
          disabled="#{licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA3)}" 
        size="1"
        pt:name="udalist3"
        value="#{licenseSelectionBean.selectedItemUda3}"
        pt:id="udalist3"                                            
        styleClass="sel-chosen">

        <f:selectItems var="uda3"
            value="#{licenseSelectionBean.selectUda3}" />
        <!--  <f:ajax render="#{FormFieldsEnum.ITEM_UDA4.getFieldCode()}" 
                listener="#{licenseSelectionBean.onChangeFilter()}" /> -->
    </h:selectManyListbox>
</div>                                      

  </div>
  </ui:fragment>

使用“ pt ”進行傳遞，因為JSF為動態ID加上了前綴。

如何解決這個問題？

Answer 1

簡單的解決方案。 更換

<f:ajax event="change" execute="@this" render="@this udalist3" 
listener="#{licenseSelectionBean.onChangeFilter()}" /> 

與

<f:ajax event="change" execute="@this" render="@form" 
listener="#{licenseSelectionBean.onChangeFilter()}" />

這可能會導致不必要的流量。 您也可以將第二個ui：fragment封裝在一個面板組中，例如

<h:panelGroup id="wrapper">
  <ui:fragment rendered="#{udaList.index eq 2}">
   ....
</h:panelgroup>

並在f：ajax渲染屬性中將“ udalist3”替換為“包裝器”。