Struts 2 AJAX Tutorial – Dojo Autocompleter Example
This tutorial was written for Struts 2.1.2. A lot has changed in newer versions. The Dojo Plugin is no longer officially supported by the Struts 2 team. Also, please see Muhammad’s comment in the comment section if you’re using the latest version of Struts 2. You may want to check out Google Closure if you’re looking for a good JS library.
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) {
json.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.
If instead of serializing a Java object to JSON you wish to create the JSON string directly yourself, you can instead use a result type of “stream”:
<action name="jsondata" class="com.lumidant.tutorial.struts2.action.JsonDataAction">
<result type="stream">
<param name="contentType">application/json</param>
</result>
</action>
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.
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
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
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
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
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.
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-
Hi Julloa,
It is only the Dojo plug-in that is deprecated, not Dojo itself. You may be better off 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.
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 ?
i have problem in filling the autocompleter in struts 2 using ajax and javascript please someone help me
Hi people, i have a problem when I try to build an autocompleter from an ajax page, this is, another jsp where I declare the autocompleter, but the tag is not completely parse or something, i’ve checked the resulting code with firebug and there too much left than in the working autocompleter code in the main page. This has been a real nightmare for me to get struts2 to work with ajax in IE6 and Firefox, but even more in IE6 where the tags they just dont want to work. Due to this i decided to learn and use standard plain and simple ajax, i have been fighting a while with OGNL expresions and but when finally i can shout Victory, i found that autocompleters arent there :S, only the text field, this is part of the code:
here is where i want to put the content obtained via AJAX passing through the its action and loading dynamic data, everything’s fina so far, this is what i want to show:
planes.jsp:
Rif
Ci
:
the code above was working in the main page.jsp, but when i moved it to planes.jsp it now shows olvy the text box.
Can you suggest me any clue to show my ac declared in AJAX’s external jsps?? Or lead me to where to ask.
Thank you very much
Sorry, the page deleted the code :S
Hi all I am also trying the same with strut 2.1.6…
It is not working at all. Please can you share some info…
I do not think Struts 2 comes with result type called json. I think we will have to write a custom result handle and define it in the config file to achieve the goal. Correct me if I am wrong.
ssm, this example uses the Struts 2 JSON plugin referenced at the beginning of the post
Hi!!!
That great!!!
So, May u tell me how to using autocomplete with object list?
I have class as bellow:
Employee {
String code;
String name;
}
And how to using autocomplete with List and search following name of employee?
Thanks a lot!!!
List (Employee) instead of Map(String, String)
Very well written, simple but comprehensive article to guide newbies like me introducing many concepts in the way. Highly commendable effort. Took me a couple of days to get all of it working on Struts 2.1.6 (except for the DAO part which I omitted on purpose). Want to provide a little heads-up for people attempting this on newer versions of struts2 to save them from some possible frustration.
0. As pointed out by Benjamin, this example uses the jsonplugin.jar instead of the new json-lib (using which might require another tutorial).
1. Omit (theme=”ajax”) from autocompleter tag in the .jsp file. It is no longer required.
2. Add (loadOnTextChange=”true”) to the tag. The documentation for autocompleter says that this attribute is ‘true’ by default but my experience and experimentation has shown otherwise.
3. Move (method=”getCities”) from the autocompleter tag in the .jsp file to action definition in struts.xml.
4. Also, since 2.0.9, key:value pair order has been reversed and value comes first now, so change the (json.put(Id, CityName)) statement to (json.put(CityName, Id)).
With this working now, I’ll look into adapting to json-lib which is a part of struts2 now.
Again, thanks for the wonderful article.
Have fun.
Oh another thing:
5. Add (preload=”false”) to the autocompleter tag since it is true by default and causes the action to be carried out once on page load only.
I’ve checked and you’ll need to carry out points 2. & 5. to get it to work fully.
Thanks Muhammad. I really appreciate you sharing this knowledge.
You’re most welcome. Just trying to give something back.
My query is similar to that of julloa
I want to load classes based on the selection of department & then subclasses based on class selection. Can someone please mail me a smaple code to do this?
as am starter in Ajax(with Struts), please help me with loading a select box, based on the radio button selected, can any body send the sample code to do this..?
Anusha: Gilbert:
You would require a little knowledge of Dojo ‘Topics’ and AJAX enabled struts tags (like div etc). Rest is pretty simple.
For a demo, you can follow the example given at:
http://javachamp.blogspot.com/2008/06/struts-2-ajax-drop-down-example.html.
Like this tutorial, that example was also made in Struts 2.0.x and needs some fixing to work with Struts 2.1.4+ libraries. Fortunately, someone has commented on the example given steps in making the example up-to-date. Should get you up and running in no time. I got that example working for me with Struts 2.1.6 (just in case any one needs a working code).
Regards.
Hi,
I’m newwbie and I have a question.
The default package in struts.xml already extends struts-default, so how can I extends json-default too??
Thanks
Delph, you cannot directly extend from two packages. Extending from json-default should be sufficient in this example. If I remember correctly, json-default extends from struts-default.
Hi-
Thanks for the detailed tutorial on Dojo Autocompleter.
I have one requirement that need to capture the “mouseout” event on the autocompleter component. I have been searching for this, I couldn’t find any.
Explanation:
Once user enters the text that is not there in the list, I need to handle couple of other things as soon as user tabs out of the component.
Please help me if anyone have ideas.
Thanks in advance,
Suresh
I want to disable autocompleter combobox if no item is there in autocompleter.
Can anyone help me out.
Disable autocompleter combobox not autocompleter.
Thanks
In advance.
Rajeev Kumar
Hallo,
how does the code for:
class=”com.lumidant.tutorial.struts2.action.JsonDataAction”
look like?
I am newie and I cannot construct it myselft.
Thanks
Remove the theme attribute when u r using struts-dojo2.1.6
Hi,
I am using struts2.0.x.jar. for that jar i have to use autocomplete tag in my project. which are the jar files i have to use. tell me the versions of both json and dojo
Thank you in advance
Hi,
Iam newie ,iwant to perform autocompleter for searching a title so some one can send me the good understandable struts compatiable code
very good example
Hi,
onChange(),onKeyPressEvent(), all javascript events doesn’t work with sx:autocompleter tag in struts2.1.8.
How can we make it work.
mvg
-Praful
onchange is not working with sx:autocompleter tag in struts 2.1.8.
Can anybody give me the solution. I need it urgently.
i had used same code but i get the exception fail to start dispatcher i use web.xml file as per recommendation of struts 2.0
i think there is problem of liberies in struts 2.0 i use core liberies of struts 2
plz give some instruction regarding this
thanks in advance
Default textbox focus is not working in struts2.2.Iam new to struts 2.2.
Can somebody send me the example code.
My requirement: once page loads focus has to be there in the Username Textbox, now what is happening is if i refresh the page then the focus is coming.
Please help me on this issue.
Nice Tutorial . Really Helps me lot !!!!!!!!
how can i doing to get just the key of the city when the user select a city?
wrong example becoz ‘cityList’ is not available in backing bean
When I am using sx:autocompleter as without dropdown arrow, I am facing issue like focus got lost is am typing anything is not present in that dropdown list. I have tried with this attribute forceValidOption=”true” but it clear entire keyword whatever i have typed. How to resolve this issue. Help me on this please…