PrimeFaces Ajax Dropdown

PrimeFaces provides an easy way to create dynamic dropdown on the basis of filter. A new dropdown is formed by Ajax call. The <p:ajax> tag call Java method after each event is occurred.

In the following example, we are creating two dropdown. This example includes the following files.

JSF File

// ajax-dropdown.xhtml

  <?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”>  <html xmlns=”http://www.w3.org/1999/xhtml”  xmlns:h=”http://xmlns.jcp.org/jsf/html”  xmlns:p=”http://primefaces.org/ui”  xmlns:f=”http://xmlns.jcp.org/jsf/core”>  <h:head>  <title>Ajax Dropdown</title>  </h:head>  <h:body>  <h:form>  <p:growl id=”msgs” showDetail=”true” />  <p:panel header=”Provide Your Address” style=”margin-bottom:10px;”>  <h:panelGrid columns=”2″ cellpadding=”5″>  <p:outputLabel for=”country” value=”Country: ” />  <p:selectOneMenu id=”country” value=”#{dropdown.country}” style=”width:150px”>  <p:ajax listener=”#{dropdown.onCountryChange}” update=”city” />  <f:selectItem itemLabel=”Select Country” itemValue=”” noSelectionOption=”true” />  <f:selectItems value=”#{dropdown.countries}” />  </p:selectOneMenu>  <p:outputLabel for=”city” value=”City: ” />  <p:selectOneMenu id=”city” value=”#{dropdown.city}” style=”width:150px”>  <f:selectItem itemLabel=”Select City” itemValue=”” noSelectionOption=”true” />  <f:selectItems value=”#{dropdown.cities}” />  </p:selectOneMenu>  </h:panelGrid>  <p:separator />  <p:commandButton value=”Submit” update=”msgs” actionListener=”#{dropdown.displayLocation}” icon=”ui-icon-check” />  </p:panel>  </h:form>  </h:body>  </html>  

ManagedBean

// Dropdown.java

  package com.tutoraspire;  import java.io.Serializable;  import java.util.HashMap;  import java.util.Map;  import javax.annotation.PostConstruct;  import javax.faces.application.FacesMessage;  import javax.faces.bean.ManagedBean;  import javax.faces.bean.ViewScoped;  import javax.faces.context.FacesContext;  @ManagedBean  @ViewScoped  public class Dropdown implements Serializable {  private final Map<String,Map<String,String>> data = new HashMap<>();  private String country;   private String city;    private Map<String,String> countries;  private Map<String,String> cities;  @PostConstruct  public void init() {  countries  = new HashMap<>();  countries.put(“USA”, “USA”);  countries.put(“India”, “India”);  countries.put(“Russia”, “Russia”);  Map<String,String> map = new HashMap<>();  map.put(“New York”, “New York”);  map.put(“San Francisco”, “San Francisco”);  map.put(“Denver”, “Denver”);  data.put(“USA”, map);  map = new HashMap<>();  map.put(“New Delhi”, “New Delhi”);  map.put(“Bombay”, “Bombay”);  map.put(“Calcutta”, “Calcutta”);  data.put(“India”, map);  map = new HashMap<>();  map.put(“Moscow”, “Moscow”);  map.put(“Saint Petersburg”, “Saint Petersburg”);  map.put(“Samara”, “Samara”);  data.put(“Russia”, map);  }  public Map<String, Map<String, String>> getData() {  return data;  }  public String getCountry() {  return country;  }  public void setCountry(String country) {  this.country = country;  }  public String getCity() {  return city;  }  public void setCity(String city) {  this.city = city;  }  public Map<String, String> getCountries() {  return countries;  }  public Map<String, String> getCities() {  return cities;  }  public void onCountryChange() {  if(country !=null && !country.equals(“”))  cities = data.get(country);  else  cities = new HashMap<>();  }  public void displayLocation() {  FacesMessage msg;  if(city != null && country != null)  msg = new FacesMessage(“Selected”, city + ” of ” + country);  else  msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, “Invalid”, “City is not selected.”);   FacesContext.getCurrentInstance().addMessage(null, msg);    }  }  package com.tutoraspire;  import java.io.Serializable;  import java.util.HashMap;  import java.util.Map;  import javax.annotation.PostConstruct;  import javax.faces.application.FacesMessage;  import javax.faces.bean.ManagedBean;  import javax.faces.bean.ViewScoped;  import javax.faces.context.FacesContext;  @ManagedBean  @ViewScoped  public class Dropdown implements Serializable {  private final Map<String,Map<String,String>> data = new HashMap<>();  private String country;   private String city;    private Map<String,String> countries;  private Map<String,String> cities;  @PostConstruct  public void init() {  countries  = new HashMap<>();  countries.put(“USA”, “USA”);  countries.put(“India”, “India”);  countries.put(“Russia”, “Russia”);  Map<String,String> map = new HashMap<>();  map.put(“New York”, “New York”);  map.put(“San Francisco”, “San Francisco”);  map.put(“Denver”, “Denver”);  data.put(“USA”, map);  map = new HashMap<>();  map.put(“New Delhi”, “New Delhi”);  map.put(“Bombay”, “Bombay”);  map.put(“Calcutta”, “Calcutta”);  data.put(“India”, map);  map = new HashMap<>();  map.put(“Moscow”, “Moscow”);  map.put(“Saint Petersburg”, “Saint Petersburg”);  map.put(“Samara”, “Samara”);  data.put(“Russia”, map);  }  public Map<String, Map<String, String>> getData() {  return data;  }  public String getCountry() {  return country;  }  public void setCountry(String country) {  this.country = country;  }  public String getCity() {  return city;  }  public void setCity(String city) {  this.city = city;  }  public Map<String, String> getCountries() {  return countries;  }  public Map<String, String> getCities() {  return cities;  }  public void onCountryChange() {  if(country !=null && !country.equals(“”))  cities = data.get(country);  else  cities = new HashMap<>();  }  public void displayLocation() {  FacesMessage msg;  if(city != null && country != null)  msg = new FacesMessage(“Selected”, city + ” of ” + country);  else  msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, “Invalid”, “City is not selected.”);   FacesContext.getCurrentInstance().addMessage(null, msg);    }  }  

After executing, it produces the following output.

Output:

PrimeFaces Dropdown 1

The second dropdown contains the city names for each country. Each time country is selected, city dynamically updates.

PrimeFaces Dropdown 2
PrimeFaces Dropdown 3

Next TopicPrimeFaces Ajax Poll

Primefaces Ajax Dropdown

PrimeFaces Ajax Dropdown

JSF File

ManagedBean

SSRS vs Power BI

Backtracking in Prolog

You may also like