f:ajax not rendering h:selectManyListbox - ajax

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, e.g.
<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.