Here, I am going to show you the way to populate three select box using Struts-JQuery plugins via AJAX Call.
Let's take a very common example to populate Country, State and City in select box dynamically.
To do that, you need to call struts action that fetch the list of country/city/state from database or any static array list using AJAX call.
Here are the code snippet to do the same:
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<sj:head />
<body>
<s:form id="formSelectReload" theme="simple">
<s:url var="remoteurl" action="ajaxdemo" />
<sj:select
href="%{remoteurl}"
id="echo"
name="country"
list="countryList"
onChangeTopics="reloadStateList"
emptyOption="true"
headerKey="-1"
headerValue="---Please Select Country---" />
<sj:select
href="%{remoteurl}"
id="selectWithReloadTopicSecond"
formIds="formSelectReload"
reloadTopics="reloadStateList"
onChangeTopics="reloadCityList"
name="state"
list="stateList" headerKey="-1"
headerValue="---Please Select State---" />
<sj:select
href="%{remoteurl}"
id="selectWithReloadTopicThird"
formIds="formSelectReload"
reloadTopics="reloadCityList"
name="city"
list="cityList"
headerKey="-1"
headerValue="---Please Select City---" />
</s:form>
</body>
</html>
The main thing you should notice here is onChangeTopics attribute.
The value, you provide here should be the same for the reloadTopics attribute of the next select box that you want to populate next.
This way you can populate as many select box as you want to.
One more thing, I mentioned action="ajaxdemo" in <s:url> (which is common for all the three select box) that calls struts action class mentioned in the mapping file struts.xml.
Here is the code snippet of sturts.xml
struts.xml
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="AJAXPackage" extends="json-default">
<action name="ajaxdemo"
class="com.actions.CountryStateCityAction"
method="myCustomMethod">
<result name="success" type="json"></result>
</action>
</package>
</struts>
Here is the code of CountryStateCityAction.java file
CountryStateCityAction.java
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
public class CountryStateCityAction extends ActionSupport {
private List<String> countryList;
private List<String> stateList;
private List<String> cityList;
private String state;
private String country;
private String city;
private String result;
public String myCustomMethod() {
countryList = new ArrayList<String>();
stateList = new ArrayList<String>();
cityList = new ArrayList<String>();
countryList.add("India");
countryList.add("US");
countryList.add("Japan");
if (country != null) {
if (country.equals("India")) {
stateList.add("Gujarat");
stateList.add("Maharashtra");
stateList.add("Delhi");
} else if (country.equals("US")) {
stateList.add("Washington");
stateList.add("NJ");
stateList.add("NY");
} else if (country.equals("Japan")) {
stateList.add("Tokyo");
stateList.add("Kagoshima");
}
}
if (state != null) {
if (state.equals("Gujarat")) {
cityList.add("Ahmedabad");
cityList.add("Surat");
} else if (state.equals("Maharashtra")) {
cityList.add("Mumbai");
cityList.add("Pune");
}
}
result = "success";
return result;
}
public List<String> getCountryList() {
return countryList;
}
public void setCountryList(List<String> countryList) {
this.countryList = countryList;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}
public List<String> getStateList() {
return stateList;
}
public void setStateList(List<String> stateList) {
this.stateList = stateList;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public List<String> getCityList() {
return cityList;
}
public void setCityList(List<String> cityList) {
this.cityList = cityList;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
One main important thing, don't forget to add filter entry in your web.xml file. :-p
Here is the entry for filter that you have to add in your web.xml file before running this demo:
<filter>
<filter-name>Struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>Struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
And you have to add these two JAR files with other struts JAR files while running this demo:
struts2-jquery-plugin-2.3.1.jar
struts2-json-plugin-2.3.4.jar
Now you are done.Try it yourself.
You can fill up the list values dynamically using database as well.
Happiee Coding...!!!
