Viral Patel is a keen technology blogger and enthusiast. Working with a software company, he uses his leisure time to learn and explore emerging areas in tech world. His passion for technology has motivated him from creating an operating system to writing tutorials/articles on Java, JavaEE, Spring, Hibernate, Struts, jQuery, PHP. Visit the website http://viralpatel.net for a wide range of articles and tutorials on these topics. Viral has posted 13 posts at DZone. View Full User Profile

Struts 2 Tutorial: Struts 2 Ajax Tutorial with Example

01.20.2010
| 82513 views |
  • submit to reddit

Welcome to the last part of 7 article series of Struts 2 Framework tutorials. In previous article we saw how to implement File Upload functionality in Struts 2. In this article we will see how we can implement Ajax support in a webapplication using Struts2 framework.

Struts 2 Tutorial List

AJAX support in Struts 2

Struts 2 provides built-in support to AJAX using Dojo Toolkit library. If you are new to Dojo, you may want to go through the Introduction of DOJO Toolkit.

Struts 2 comes with powerful set of Dojo AJAX APIs which you can use to add Ajax support. In order to add Ajax support, you need to add following JAR file in your classpath:
struts2-dojo-plugin.jar

Also once we add this JAR file, we need to add following code snippet in whatever JSP file we need to add AJAX support.

<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

First define the taglib sx which we will use to add AJAX enabled tags.

<sx:head/>

Add this head tag in your JSP between <head> … </head> tags. This sx:head tag will include required javascript and css files to implement Ajax.

AJAX Example: Struts2 Ajax Drop Down

Let us add simple AJAX support in our StrutsHelloWorld web application. We will use the base code that we used in previous articles and add Ajax on top of it.

We will create a drop down which will Autocomplete and suggest the input. For this we will add Dojo support to our webapp.

Step 1: Adding JAR file

As discussed earlier we will add struts2-dojo-plugin.jar in classpath (WEB-INF/lib). Thus, following is the list of required jar files. Note that these jars are needed to run full application including all the samples of previous parts of this tutorial series.
struts2-ajax-jar-files

Step 2: Create AJAX Action class

We will create an action class which will get called for our Ajax example. Create a file AjaxAutocomplete.java in net.viralpatel.struts2 package and copy following content into it.
AjaxAutocomplete.java

package net.viralpatel.struts2;

import java.util.ArrayList;
import java.util.List;
import java.util.StringTokenizer;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAutocomplete extends ActionSupport {
private String data = "Afghanistan, Zimbabwe, India, United States, Germany, China";
private List<String> countries;
private String country;

public String execute() {
countries = new ArrayList<String>();
StringTokenizer st = new StringTokenizer(data, ",");

while (st.hasMoreTokens()) {
countries.add(st.nextToken().trim());
}
return SUCCESS;
}
public String getCountry() {
return this.country;
}

public List<String> getCountries() {
return countries;
}

public void setCountries(List<String> countries) {
this.countries = countries;
}
public void setCountry(String country) {
this.country = country;
}
}

In above code we have created a simple action class with attribute String country and List countries. The countries list will be populated with country names when execute() method is called. Here for this example, we have loaded static data. You may feel free to change this and add data from database.

Step 3: Create JSP

Create JSP file to display Autocomplete textbox for our Ajax action. Create AjaxDemo.jsp in WebContent directory.
AjaxDemo.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>

<title>Welcome</title>
<sx:head />
</head>
<body>
<h2>Struts 2 Autocomplete (Drop down) Example!</h2>

Country:
<sx:autocompleter size="1" list="countries" name="country"></sx:autocompleter>
</action>
</body>

</html>

In above JSP file we have used sx:autocompleter tag to render an autocomplete drop down which users Ajax class to fetch data internally. Note that we have mapped the list attribute with List countries.

Step 4: Creating Struts.xml entry

Add following action entry in Struts.xml file:

<action name="ajaxdemo" class="net.viralpatel.struts2.AjaxAutocomplete">

<interceptor-ref name="loggingStack"></interceptor-ref>
<result name="success" type="tiles">/ajaxdemo.tiles</result>
<result type="tiles">/ajaxdemo.tiles</result>

</action>

Notice that we are using Tiles here in this example. You may want to use AjaxDemo.jsp instead of /ajaxdemo.tiles to render the output directly in JSP.

That’s All Folks

Compile and Run the application in eclipse.
struts2-ajax-drop-down

Download Source Code

Click here to download Source Code without JAR files (24KB)

Conclusion

Struts2 Framework provides wide variety of features to create a rich web application. In this Struts2 series we saw different aspects of Struts 2 like introduction of struts2, hello world application, validation framework, tiles plugin, strurts2 interceptors, file upload and ajax support.

Published at DZone with permission of its author, Viral Patel.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Chandrika Nagalingam replied on Sat, 2010/02/13 - 3:59pm

Great introduction to new features in Struts 2

 

Thanks!

Ajit Kumar replied on Fri, 2011/07/08 - 2:39am

Hey can we incorporate online payment in the above application.

Francesco De Rose replied on Thu, 2011/10/20 - 10:18am

The error: struts-dojo-tags not found, appears on the AjaxDemo.jsp page. I created the AjaxDemo.jsp page <%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sx" uri="/struts-dojo-tags"%> Welcome

Struts 2 Autocomplete (Drop down) Example!

Country: Here my struts.xml /ajaxdemo.tiles /ajaxdemo.tiles I included struts2-dojo-plugin-2.1.8.1.jar in WEB-INF/lib and it has been deployed! What could I check? Thanks

Sri Ram replied on Sat, 2013/02/23 - 11:27am

Two Important notes :

1) URL should look like this :

http://localhost:8000/StrutsTest/ajaxdemo

You should not use AjaxDemo.jsp, because we mapped the action to tiles.

2) Define a tile & map it to JSP in tiles.xml  (which is missed in this tutorial):

  <definition name="/ajaxdemo.tiles" ">
  <put-attribute name="title" value="On Ajax Demo" />
  <put-attribute name="body" value="/AjaxDemo.jsp" />
  </definition>

Arden Han replied on Thu, 2013/04/11 - 12:53pm

Hi,

Thank you for creating this tutorial. It's very clearly written.

I'm having a problem adding a page to "Part 4: Struts 2 Tiles Plugin Tutorial with Example". I added the necessary code to struts.xml, tiles.xml, menu.jsp and linkAction.java but it's not working, the feedback in the Console section of Eclipse rolls on and on and the page does not render.


Could you tell me what I missed or what files have to be changed to add a page.

Thank you

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.