f:ajax not rendering h:selectManyListbox

Question

Using f:ajax component with h:selectManyListbox , it is firing the listener method but not refreshing the rendering list.

I have Market. When I select market it needs to display Sub-Markets. Initial page load will have all the Markets and Sub-Markets, but it needs to filter when user selects "Market".

Using below code:

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

Used " pt " for pass-through because JSF prefixing dynamic id.

How to resolve this problem?

Answer 1

Simple solution. Replace

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

with

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

This might cause some unnecesarry traffic. You can also encapsulate the second ui:fragment in a panelgroup, eg

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

and add replace "udalist3" with "wrapper" in the f:ajax render attribute.