Pages

Friday, January 18, 2013

Select Box that loads its content using ajax call using Struts-JQuery Plugins

Hi Guys,

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, in struts.xml file, the mentioned action class is CountryStateCityAction.java and method is myCustomMethod().
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...!!!

Posted by at

7 comments:

  1. UnknownMay 11, 2013 at 4:10 AM

    Great contribution!.
    One question, if the state is "delhi" I want to hide the third sj: select
    Can you help?
    thanks

    ReplyDelete
  2. UnknownMay 12, 2013 at 7:50 PM

    I have a problem: if I use validator.xml or validate () does not load the lists, does not work.
    Can you help?
    thanks

    ReplyDelete
  3. SriJanuary 12, 2014 at 4:02 PM

    hi,
    it is very useful example to me, but i have a problem , third select box values are populated even though i am not select any state because of in state select box previous value does not reset. how to avoid this problem in this given example .
    Can you help?
    thanks

    ReplyDelete
    Replies
    1. Dhaval ShahJanuary 24, 2014 at 1:59 PM

      Hi Sri,
      I need to check this issue..I will reply on the same later...

      Delete
    2. Dhaval ShahMarch 3, 2014 at 4:21 PM

      Hi Sri,

      First of all I am very sorry for so late reply.
      I sort out the problem.
      To reload state and city list on selection of country, you need to specify onChangeTopics="reloadStateList,reloadCityList" in the country dropdown list.

      So the country dropdown code would be like this:

      <sj:select href="%{remoteurl}" id="echo" name="country"
      list="countryList" onChangeTopics="reloadStateList,reloadCityList"
      emptyOption="true" headerKey="-1"
      headerValue="---Please Select Country---" / >

      Please let me know, if you have any problem.

      Delete
  4. daniApril 15, 2014 at 2:34 PM

    Dear Dhaval,
    thank you so much for this great tutorial! it helps a lot!
    One question one my side:
    I'm able to load the Country select, but when I select a country, no value of "country" is passed to the CountryStateCityAction (country==null), so the content of the State select is empty.
    Could you support me pls?
    I'm using struts2-core-2.3.16 and struts2-json-plugin-2.3.16.1

    thanks in advance and best regards

    ReplyDelete
  5. senzamaiMay 21, 2014 at 3:54 PM

    I have the same problem of dani. I used struts2-jquery-plugin-2.3.1.jar
    struts2-json-plugin-2.3.4.jar as you suggested. The String country is null and so the second select is empty.

    ReplyDelete

Subscribe to: Post Comments (Atom)