create ajax State-City of U.S selection in Primefaces

  1. get all state, city info of U.S from HERE . There are also many other data could be freely download from this site.
  2. dump the dbf file to sql.
  3. create tables in mysql and import all data
  4. create UI and backing beans for the data.


<h:outputLabel for="state" value="state: *" />

<p:selectOneMenu id="state" value="#{userManager.potentialUser.state}">

<f:selectItem itemLabel="Select State" itemValue="" />

<f:selectItems value="#{stateCityManager.states}" />

<p:ajax<span style="color: #ff0000;"> update="city" </span>listener="#{stateCityManager.handleStateChange}" />


<h:outputLabel for="city" value="city: *" />

<p:selectOneMenu id="city" value="#{}">

<f:selectItem itemLabel="Select City" itemValue="" />

<f:selectItems value="#{stateCityManager.cities}" />


Spring Bean:



public class StateCityManager {

public StateCityManager() {



StateCityDao stateCityDao;

private List&lt;String&gt; states;

private List&lt;String&gt; cities;

private UserManager userManager;

public UserManager getUserManager() {

return userManager;



public void setUserManager(UserManager userManager) {

this.userManager = userManager;


//private String state = userManager.getPotentialUser().getState();    //can not use a private field to connect values between components, otherwise NPE.


public void init() {



public void loadStates(){

states = stateCityDao.getAllStates();

cities = new ArrayList&lt;String&gt;();


<span style="color:#ff0000;">public void handleStateChange() {  </span>

<span style="color:#ff0000;">        if(userManager.getPotentialUser().getState() !=null &amp;&amp; !userManager.getPotentialUser().getState().equals(""))  </span>

<span style="color:#ff0000;">            cities = stateCityDao.getCitiesByState(userManager.getPotentialUser().getState());  </span>

<span style="color:#ff0000;">        else  </span>

<span style="color:#ff0000;">            cities = new ArrayList&lt;String&gt;();  </span>

<span style="color:#ff0000;"> }  </span>}



public class StateCityDaoImpl extends BaseDaoImpl implements StateCityDao {


public List&lt;String&gt; getAllStates() throws DataAccessException {


List&lt;String&gt; results = em.createNamedQuery("StateCity.findAllStates").getResultList();

if (results == null) {

results = new ArrayList&lt;String&gt;();


return results;



public List&lt;String&gt; getCitiesByState(String state)

throws DataAccessException {


List&lt;String&gt; results = em.createNamedQuery("StateCity.findCitiesByState").setParameter("state", state).getResultList();

if (results == null) {

results = new ArrayList&lt;String&gt;();


return results;



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s