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

Steps:
  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.

UI:

<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}" />

</p:selectOneMenu>

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

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

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

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

</p:selectOneMenu>

Spring Bean:

@Component("stateCityManager")

@Scope("session")

public class StateCityManager {

public StateCityManager() {

}

@Inject

StateCityDao stateCityDao;

private List&lt;String&gt; states;

private List&lt;String&gt; cities;

private UserManager userManager;

public UserManager getUserManager() {

return userManager;

}

@Autowired

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.

@PostConstruct

public void init() {

loadStates();

}

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>}

 </div>
 <div></div>
 <div></div>
 <div>DAO</div>
 <div>
@Repository

@Transactional

public class StateCityDaoImpl extends BaseDaoImpl implements StateCityDao {

@Override

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

@SuppressWarnings("unchecked")

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

if (results == null) {

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

}

return results;

}

@Override

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

throws DataAccessException {

@SuppressWarnings("unchecked")

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

if (results == null) {

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

}

return results;

}

}
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s