Filtering h:selectOneMenu using a4j:support - Java Code
Dears,
I have two selectOneMenu(s) country and city. When the User select one country the city combo box should be loaded with corresponding cities in that country.
Noticing that I am using Richfaces 3.1.6 (JSF 1.1) and Java code to build my screen at runtime. The following are my source files:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>untitled1</title>
</head>
<body>
<a4j:form ajaxSubmit="true">
<h:panelGrid binding="#{bean.htmlPanelGrid}" />
</a4j:submit>
</body>
</html>
</f:view>
The following my Bean
package comboboxes;
import java.util.HashMap;
import java.util.Map;
import javax.faces.component.UIComponent;
import javax.faces.component.UISelectItems;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.context.FacesContext;
import javax.faces.el.ValueBinding;
import javax.faces.event.ActionEvent;
import org.ajax4jsf.component.html.AjaxForm;
import org.ajax4jsf.component.html.HtmlAjaxSupport;
public class Bean {
private HtmlPanelGrid htmlPanelGrid;
private HtmlSelectOneMenu country;
private HtmlSelectOneMenu city;
public Bean() {
this.htmlPanelGrid = new HtmlPanelGrid();
this.country = new HtmlSelectOneMenu();
this.country.setId("countryId");
this.populate(country);
this.city = new HtmlSelectOneMenu();
this.city.setId("cityId");
this.populate(city);
this.addOnChange(country, "cityId");
this.getHtmlPanelGrid().getChildren().add(country);
this.getHtmlPanelGrid().getChildren().add(city);
}
public void addOnChange(UIComponent component, String reRender) {
HtmlAjaxSupport htmlAjaxSupport = new HtmlAjaxSupport();
htmlAjaxSupport.setId("htmlAjaxSupportId");
htmlAjaxSupport.setEvent("onchange");
htmlAjaxSupport.setReRender(component.getParent().getId() + ":" + reRender);
htmlAjaxSupport.setActionListener(FacesContext.getCurrentInstance().getApplication().createMethodBinding(
"#{bean.loadCombo}", new Class[] {ActionEvent.class}));
component.getChildren().add(htmlAjaxSupport);
}
public void loadCombo(ActionEvent e) {
this.city.setValue("Paris");
}
public void populate(UIComponent component) {
Map map = new HashMap();
map.put("France", "Paris");
map.put("England", "London");
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("map", map);
ValueBinding valueBinding = FacesContext.getCurrentInstance().getApplication().createValueBinding("#{sessionScope.map}");
UISelectItems selectItems = new UISelectItems();
selectItems.setValueBinding("value", valueBinding);
component.getChildren().add(selectItems);
}
public void setHtmlPanelGrid(HtmlPanelGrid htmlPanelGrid) {
this.htmlPanelGrid = htmlPanelGrid;
}
public HtmlPanelGrid getHtmlPanelGrid() {
return htmlPanelGrid;
}
}
The problem here is, the ActionListener is executed but the city combo box is not refreshing. I believe the HtmlAjaxSupport is not working porperly.
do you have any idea?
