how to update selectOneMenu when another one changes in jsf - jsf

Question

i know that this is quetion is already answered here but i don't know why my code didn't work
i have two list and i want that when the first one changes that's the others update
here's my code
<h:selectOneMenu id="e4" styleClass="col-md-5" value="#{categoryModel.selectedMenu}">
<f:selectItem />
<f:selectItems value="#{categoryModel.catFinanceVect}" var="catFinance"itemLabel="#{catFinance.designation}" itemValue="#{catFinance.ligne}" />
<!-- <a4j:ajax event="valueChange" render="e3" execute="#this" />-->
<f:ajax event="valueChange" execute="#this" render="e3" listener="#{categoryModel.getCatItList}"/>
</h:selectOneMenu>
<div class="col-md-1"></div>
<h:selectOneMenu id="e3" styleClass="col-md-6">
<f:selectItem />
<f:selectItems value="#{categoryModel.catItVect}" var="catIt"itemLabel="#{catIt.designation}" itemValue="#{catIt.designation}" />
</h:selectOneMenu>
and here's my backing bean :
#ManagedBean
#SessionScoped
public class CategoryModel {
private CatFinance catFinance= new CatFinance();
private Vector<CatFinance> catFinanceVect = new Vector<CatFinance>();
private CatIt catIt= new CatIt();
private Vector<CatIt> catItVect = new Vector<CatIt>();
private Integer selectedMenu;
public CategoryModel() {
super();
// TODO Auto-generated constructor stub
}
public CatFinance getCatFinance() {
return catFinance;
}
public void setCatFinance(CatFinance catFinance) {
this.catFinance = catFinance;
}
public Vector<CatFinance> getCatFinanceVect() {
return catFinanceVect;
}
public void setCatFinanceVect(Vector<CatFinance> catFinanceVect) {
this.catFinanceVect = catFinanceVect;
}
public CatIt getCatIt() {
return catIt;
}
public void setCatIt(CatIt catIt) {
this.catIt = catIt;
}
public Vector<CatIt> getCatItVect() {
return catItVect;
}
public void setCatItVect(Vector<CatIt> catItVect) {
this.catItVect = catItVect;
}
public Integer getSelectedMenu() {
return selectedMenu;
}
public void setSelectedMenu(Integer selectedMenu) {
this.selectedMenu = selectedMenu;
}
public void getCatFinanceList(){
this.setCatFinance(new CatFinance());
CatFinanceService catFinanceService = (CatFinanceService) SpringDaoCtxFactory.getDaoContext().getBean("CatFinanceService");
this.getCatFinanceVect().clear();
try {
this.getCatFinanceVect().addAll(catFinanceService.getCatFinanceList());
} catch (Exception e) {
e.printStackTrace();
}
}
public void getCatItList(AjaxBehaviorEvent event){
this.setCatIt(new CatIt());
CatItService catItService = (CatItService) SpringDaoCtxFactory.getDaoContext().getBean("CatItService");
this.getCatItVect().clear();
System.out.println("aaaa");
try {
this.getCatItVect().addAll(catItService.getCatItList(2));
} catch (Exception e) {
e.printStackTrace();
}
}
#PostConstruct
public void init(){
getCatFinanceList();
}
}
if anyone can help in this or give me a good tutoriel of how to do it i will appreciate it so much
thanks in advance

Answer 1

The f:ajax event is invalid. It should be change (or empty as it defaults to change for h:selectOneMenu.)
<f:ajax execute="#this" render="e3" listener="#{categoryModel.getCatItList}"/>