Struts 2 - The Ajax Tags Example

In this tutorial we will discuss about struts 2 Ajax Call tag with using struts dojo plugin in our application.
Struts uses the DOJO framework for the AJAX tag implementation. First of all, to proceed with this example, you need to add struts2-dojo-plugin-2.3.15.jar to your classpath.

For this exercises, let us create ajax.jsp as follows:

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
<title>Ajax Tag Struts2 | dineshonjava.com</title>
<s:head />
<sx:head />
</head>
<body>
   <s:form>
      <sx:autocompleter label="Favourite Colour"
         list="{'red','green','blue'}" />
      <br />
      <sx:datetimepicker name="deliverydate" label="Delivery Date"
         displayFormat="dd/MM/yyyy" />
      <br />
      <s:url id="url1" value="/count1" />
      <s:url id="url2" value="/count2" />
      <s:url id="url3" value="/count3" />
      <sx:div href="%{#url3}" delay="2000">
           Initial Content
      </sx:div>
      <br/>
      <sx:tabbedpanel id="tabContainer">
         <sx:div label="Tab 1" href="%{#url1}">Tab 1</sx:div>
         <sx:div label="Tab 2" href="%{#url2}">Tab 2</sx:div>
      </sx:tabbedpanel>
   </s:form>
</body>
</html>

select.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Form Tag Struts2 | dineshonjava.com</title>
<s:head />
</head>
<body>
   <s:form action="login.action">
      <s:select name="username" label="Username"
         list="{'Mike','John','Smith'}" />

      <s:select label="Company Office" name="mySelection"
         value="%{'America'}"
         list="%{#{'America':'America'}}">
      <s:optgroup label="Asia" 
         list="%{#{'India':'India','China':'China'}}" />
      <s:optgroup label="Europe"
         list="%{#{'UK':'UK','Sweden':'Sweden','Italy':'Italy'}}" />
      </s:select>

      <s:combobox label="My Sign" name="mySign"
         list="#{'aries':'aries','capricorn':'capricorn'}"
         headerKey="-1" 
         headerValue="--- Please Select ---" emptyOption="true"
         value="capricorn" />
      <s:doubleselect label="Occupation" name="occupation"
         list="{'Technical','Other'}" doubleName="occupations2"
         doubleList="top == 'Technical' ? 
         {'I.T', 'Hardware'} : {'Accounting', 'H.R'}" />

   </s:form>
</body>
</html>

welcome.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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>Form Tag Struts2 | dineshonjava.com</title>
</head>
<body>
<b>Welcome to Ajax Call in Struts2</b>
</body>
</html>

success.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

   <s:form action="employee">
   <s:radio label="Gender" name="gender" list="{'male','female'}" />
   <s:checkboxlist label="Job Types" name="jobtypes"
   list="{'Software','Hardware','Networking','Marketing'}" />
   </s:form>

Strus2 Configuration file
struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
 
<struts>
    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="false" />
    <constant name="struts.custom.i18n.resources" value="myapp" />
 
 <package name="default" extends="struts-default" namespace="/">
        <action name="ajaxtag" class="com.dineshonjava.struts2.action.FormTagAction">
            <result name="success">/ajax.jsp</result>
        </action>
        <action name="count1" class="com.dineshonjava.struts2.action.FormTagAction" method="tab1">
            <result name="success">/select.jsp</result>
        </action>
        <action name="count2" class="com.dineshonjava.struts2.action.FormTagAction" method="tab2">
            <result name="success">/success.jsp</result>
        </action>
         <action name="count3" class="com.dineshonjava.struts2.action.FormTagAction" method="tab3">
            <result name="success">/welcome.jsp</result>
        </action>
    </package>
 </struts>

Create Action Class:

package com.dineshonjava.struts2.action;

import com.opensymphony.xwork2.ActionSupport;

/**
 * @author Dinesh Rajput
 *
 */
public class FormTagAction extends ActionSupport {

 private static final long serialVersionUID = 1L;
 
 public String execute(){
  return SUCCESS;
 }
 public String tab1(){
  return SUCCESS;
 }
 public String tab2(){
  return SUCCESS;
 }
 public String tab3(){
  return SUCCESS;
 }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>Struts2FormTags</display-name>
  <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>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

Let us now go through this example one step at a time.

First thing to notice is the addition of a new tag library with the prefix sx. This (struts-dojo-tags) is the tag library specifically created for the ajax integration.

Then inside the HTML head we call the sx:head. This initializes the dojo framework and makes it ready for all AJAX invocations within the page. This step is important – your ajax calls will not work without the sx:head being initialized.

First we have the autocompleter tag. The autocompleter tag looks pretty much like a select box. It is populated with the values red, green and blue. But the different between a select box and this one is that it auto completes. That is, if you start typing in gr, it will fill it with “green”. Other than that this tag is very much similar to the s:select tag which we covered earlier.

Next, we have a date time picker. This tag creates an input field with a button next to it. When the button is pressed, a popup date time picker is displayed. When the user selects a date, the date is filled into the input text in the format that is specified in the tag attribute. In our example, we have specified dd/MM/yyyy as the format for the date.

Right click on the project name and click Export > WAR File to create a War file. Then deploy this WAR in the Tomcat’s webapps directory. Finally, start Tomcat server and try to access

URL http://localhost:8080/doj/ajaxtag.

This will give you following screen:

After 2000 ms delay one ajax call action “count3” and display following

When click on “tab2” ajax call “count2” action and display following.

Download Source Code + Libs
ajaxtagstruts2example.zip

<<Previous << || Index || >>Next >>

8 Comments

Majid August 18, 2013

Hi,
The source code you posted above is about an Email Form, does not have anything about this tutorial.
thanks
Dinesh August 19, 2013

Hi Majid,

Thanks for joining with us.

Please download again and deploy your machine now it is related to the Ajax Sample application.

Thanks,
Dinesh
Dinesh August 19, 2013

after deploying please try this url..

http://localhost:8080/doj/ajaxtag

actually we are using same project for all tutorials so web.xml are old for welcome page.
Anonymous October 11, 2013

can you please demonstrate tiles example in struts 2.0 with souce and jars included and also can u give a simple and clear explanation about it.
– Dhirajkumar Rameshchand Jaiswal, +919867460266
Dinesh October 16, 2013

Hi Dhirajkumar,

Please have look on following link where I have described tiles with struts2 with example.
Also attached source code with Jars.

https://www.dineshonjava.com/2013/08/struts2-integration-with-tiles2-spring3.html

Thanks,
Dinesh Rajput
krishna rangaiah kadapannagari November 19, 2013

Hi can you give an example for struts2 ajax for Country-State-City select tags in a form?
Dinesh November 24, 2013

Hi Krishna,

Please elaborate more about your requirement.

Thanks,
Dinesh
Mahi Kamatam January 4, 2014

hi ,when i click the jsp page in dropdown box values populated from the db in samepage in struts without autocompleter tags…….please post…..

Struts 2 – The Ajax Tags Example

About The Author

Dinesh Rajput

8 Comments

Share this:

Related Posts

About The Author

Dinesh Rajput

8 Comments