The index.xhtml will contains following tags to display two dropdown list and to link then using Ajax.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- index.xhtml -->
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:h="
http://java.sun.com/jsf/html"
xmlns:f="
http://java.sun.com/jsf/core">
<h:head>
<title>JSF AJAX</title>
</h:head>
<h:body>
<h3>Select Mobile</h3> <h:form>
Company : <h:selectOneMenu value="#{jsfBean.company_name}">
<f:selectItems value="#{jsfBean.company}"/>
<f:ajax event="change" render="model" listener="#{jsfBean.setModel}" />
</h:selectOneMenu><br></br><br></br>
Model :
<h:selectOneMenu value="#{jsfBean.model_no}" id="model" style="width: 120px;">
<f:selectItems value="#{jsfBean.model}"/>
</h:selectOneMenu>
</h:form>
</h:body>
</html>
This application can be more effective if the given application can be implemented with database, where the dropdown lists will be loaded from database records.
Outputs :
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/package beans; import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.model.SelectItem;
/**
*
* @author Prashant
*/
@ManagedBean
@RequestScoped
public class JsfBean {
/** Creates a new instance of JsfBean */
private SelectItem[] company=new SelectItem[]{
new SelectItem(“nokia”, “Nokia”),
new SelectItem(“samsung”, “Samsung”),
new SelectItem(“sony ericson”, “Sony Ericsson”),
new SelectItem(“black berry”, “Black Berry”)
};
private SelectItem[] nokia=new SelectItem[]{
new SelectItem(“8800 Carbon”,”8800 Carbon”),
new SelectItem(“E90 Communicator”, “E90 Communicator”),
new SelectItem(“N97″, “N97″),
new SelectItem(“N96″, “N96″),
new SelectItem(“N95″, “N95″),
new SelectItem(“6260 Slide”, “6260 Slide”),
new SelectItem(“5800 Express music”, “5800 Express music”),
new SelectItem(“N73 Music Edition”, “N73 Music Edition”)
};
private SelectItem[] samsung=new SelectItem[]{
new SelectItem(“OMNIA i900″,”OMNIA i900″),
new SelectItem(“S8330 Ultra TOUCH”, “S8330 Ultra TOUCH”),
new SelectItem(“M8800 Pixon”, “M8800 Pixon”),
new SelectItem(“Jet S8003″, “Jet S8003″),
new SelectItem(“Jet U900 Soul”, “U900 Soul”),
new SelectItem(“DJ M7603″, “DJ M7603″),
new SelectItem(“U800 Soul B”, “U800 Soul B”),
new SelectItem(“Beat M3510″, “Beat M3510″),
new SelectItem(“D780″, “D780″),
new SelectItem(“E251″, “E251″),
};
private SelectItem[] sony=new SelectItem[]{
new SelectItem(“Xperia X1″,”Xperia X1″),
new SelectItem(“C905″, “C905″),
new SelectItem(“W995″, “W995″),
new SelectItem(“W980i”, “W980i”),
new SelectItem(“K850i”, “K850i”),
new SelectItem(“C902″, “C902″),
new SelectItem(“W705″, “W705″)
};
private SelectItem[] blackberry=new SelectItem[]{
new SelectItem(“Bold 9000″,”Bold 9000″),
new SelectItem(“8820″, “8820″),
new SelectItem(“8830″, “8830″),
new SelectItem(“8800″, “8800″),
new SelectItem(“Curve 8900″, “Curve 8900″),
new SelectItem(“Curve 8310″, “Curve 8310″),
new SelectItem(“Pearl 8110″, “Pearl 8110″),
new SelectItem(“Pearl Flip 8220″, “Pearl Flip 8220″)
};
private SelectItem model[]=nokia;
private String company_name=”company_name”;
private String model_no;
public JsfBean() {
}
public SelectItem[] getCompany() {
return company;
}
public void setCompany(SelectItem[] company) {
this.company = company;
}
public String getCompany_name() {
return company_name;
}
public void setCompany_name(String company_name) {
this.company_name = company_name;
}
public String getModel_no() {
return model_no;
}
public void setModel_no(String model_no) {
this.model_no = model_no;
}
public SelectItem[] getNokia() {
return nokia;
}
public void setNokia(SelectItem[] nokia) {
this.nokia = nokia;
}
public SelectItem[] getSamsung() {
return samsung;
}
public void setSamsung(SelectItem[] samsung) {
this.samsung = samsung;
}
public SelectItem[] getModel() {
//
// this.model = nokia;
return model;
}
public void setModel(AjaxBehaviorEvent evt) {
if(company_name.equalsIgnoreCase(“nokia”))
this.model =nokia;
else if(company_name.equalsIgnoreCase(“samsung”))
this.model =samsung;
else if(company_name.equalsIgnoreCase(“sony ericson”))
this.model =sony;
else if(company_name.equalsIgnoreCase(“black berry”))
this.model =blackberry;
}
}
