Struts 2 AJAX Tutorial – Dojo Autocompleter Example
Struts 2 comes with a Dojo Toolkit plugin which makes developing an AJAX application easier than ever. In addition, the AJAX plugin I would most recommend is the Struts 2 JSON plugin. In this example, we will use the two side-by-side to create an autocompleter. In order to use the Ajax support provided in Struts 2, I would recommend Struts 2.1.2 or later. Include struts2-dojo-plugin-2.1.2.jar and jsonplugin-0.30.jar in your WEB-INF/lib directory.
First, we will create the action for the field that we wish to autocomplete:
package com.lumidant.tutorial.struts2.action;
import java.util.HashMap;
import java.util.Map;
import com.opensymphony.xwork2.ActionSupport;
import com.lumidant.tutorial.struts.dao.*;
public class AutocompleteField extends ActionSupport {
private String city;
private Map<String,String> json;
public String execute() throws Exception() {
return SUCCESS;
}
public String getCities() throws Exception() {
json = new HashMap<String,String>();
if(city != null && city.length() > 0) {
CityDao dao = new CityDao();
List<City> cities = dao.getCitiesStartingWith(city);
for(City city : cities) {
map.put(city.getId(), city.getName() + ", " + city.getState().getAbbreviation());
}
}
return SUCCESS;
}
public void setCity(String city) {
this.city = city;
}
public Map<String,String> getJson() {
return json;
}
}
The getCities method in our action acts on the input String city that we’re given and creates a Map of cities starting with that text. The key of our Map is going to be the hidden option value while the value of our Map is going to be our option text.
Next, we will modify our struts.xml configuration file to utilize the JSON plugin by extending json-default:
<package name="example" extends="json-default">
<action name="AutocompleteField" class="com.lumidant.tutorial.struts2.action.AutocompleteField">
<result type="json><param name="root">json</param></result>
</action>
</package>The root parameter that we specify is the name of the variable from our Action that we want to have converted and serialized to a JSON output.
And finally, we get to create our .jsp view:
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
<sx:head />
</head>
<body>
<s:url id="cityList" action="AutocompleteField" method="getCities" />
<sx:autocompleter name="city" theme="ajax" href="{%cityList}" size="24" />
</body>
</html>
For any of the Dojo plug-in features that you use, you will need to include the <sx:head /> tag, which includes the relevant JavaScript tags into your page’s head tag. Then you can see that the autocompleter’s name attribute aligns with the city field in our Action and the url’s method attribute aligns with our Action’s getCities method. Now, when you visit your new page and start typing in the text box, you should see the field autocompleting. There are some other cool built-in Dojo tags that you should look at as well like the datetimepicker, which provides a really nice calendar.
Buy Me a Beer
Tags: AJAX, Dojo Toolkit, Struts 2, Tutorial
Saurabh said,
October 30, 2008 at 10:26 pm
hi
I have used this code. i put struts 2.1.2 jar .I have include struts2-dojo-plugin-2.1.2.jar and jsonplugin-0.30.jar in my WEB-INF/lib directory. but in xml it is not supporting theme in
Michele Pilloni said,
November 11, 2008 at 7:13 am
Hi I have the same problem, I followed carefully your instructions but it doesn’t seem able to recongnize the attribute theme in autocompleter tag:
“Attribute theme invalid for tag autocompleter according to TLD”
Any Idea? thanks
TheSialz said,
November 27, 2008 at 5:18 am
hi
I have a question about the root parameter,when my action has two methods,the first method wants to return attribute1’s JOSN,and the second wants to return attribute2’s JSON,how should I do? thanks
Ben said,
November 27, 2008 at 10:32 am
TheSialz,
I don’t think I understand your problem. That sounds like it is working properly to me. You can use one method to do an autocomplete on one field and the other method to autocomplete the other field.
What are you expecting to have happen?
-Ben
sohran said,
November 30, 2008 at 8:30 pm
Hi
How can i use dojo TextBox control to retrieve data from struts2 instead of Field Name?
I think it should be something like
but it doesn’t work.
julloa said,
May 27, 2009 at 10:00 am
hi ben, now that dojo is deprecated. do u still recommend it?
based in ur experienced, what is the best practice 2 struts2-ajax support-
Ben said,
May 27, 2009 at 6:59 pm
Hi Julloa,
It is only the Dojo plug-in that is deprecated, not Dojo itself, so using Dojo is still a reasonable choice. However, I’d recommend using the libraries directly instead of the plug-in. There are many JS libraries available and the choice of which to use isn’t much related to using Struts 2. Rather, I’d base your choice on other factors such as adoption, size/latency, and the organization you’re working with.
julloa said,
May 27, 2009 at 10:26 pm
HI:
HOW I CAN USE AJAX TAGS IN ORDER TO POPULATE 3 DROPDOWN (COUNTRY, DEPARMENT, DISTRICT).
TEH OBJECTIVE IS TO LOAD ONLY THIS 3 CONTROLERS AND NOT ALL THE JSP PAGE(USER REGISTARTION.JSP).
CAN U POINT A SHOR EXAMPLE OF THE DOJO – JSP CODE ?