PermGen error » ajax form

Spring JS – Ajax Popup with list refresh

admin — Mon, 08 Nov 2010 09:49:06 +0000

The concept

I have been working with Spring-JS for a while now and have noticed that there doesn’t seem to be too many examples out there. This tutorial should hopefully address one common usage of Spring JS and its Ajax simplifications.

One common use of any Ajax framework is to have a page list a number of items. Then allow the user to add to those items. When adding an item a popup is displayed asking for the item details. Upon saving the item the popup is closed and the list underneath is refreshed. All actions working through Ajax and without changing page.

As a flow this would be:

User clicks to list items
User clicks to add items
Popup displayed asking for new item details
User clicks save within popup
If new details passes validation
List of items refreshed and popup closed

Getting hold of the sample code

I have hosted the completed project on GitHub. So please feel free to clone the repository @ git://github.com/eggsy84/SpringPopupRefreshList.git

Also if anyone has any contributions to add to the project please drop me an email or submit a request via GitHub for write access. The GitHub page is https://github.com/eggsy84/SpringPopupRefreshList. You can also download the project from this site. The rest of the tutorial will continue assuming you have grabbed the source code.

The servlet XML

We firstly need to configure our Spring MVC through the servlet-context.xml file. For Spring-JS and partial rendering to work we define the use of Apache Tiles as our view resolving mechanism. We can do this by simply configuring a few beans:

 id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
	 name="definitions">
    		>
      			>/WEB-INF/tile-defs/tile-defs.xml>
 		>
	>
>
 
 id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	 name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
>

The main item to note here is the location of our tile defintions file. This shall be discussed shortly. The final thing to add to the servlet-xml file is to tell Spring to context scan our project for Spring controllers.


 />
 
 base-package="uk.co.eggsylife.controller" />

We’re informing Spring to scan the ‘uk.co.eggsylife.controller’ package. The complete servlet-context.xml can be seen online.

The configuration XML

For the purpose of this tutorial, the application lists students and allows the user to add students. The ‘students’ bean acts as an in-memory database that is added to at runtime. It is a simple Java ArrayList of Student model objects. Typically you will have your own model objects and different CRUD operations on those objects.

 id="students" class="java.util.ArrayList">
	>
		>
			 class="uk.co.eggsylife.persistent.Student">
				 name="studentNumber" value="1" />
				 name="firstName" value="John" />
				 name="lastName" value="Smith" />
			>
			 class="uk.co.eggsylife.persistent.Student">
				 name="studentNumber" value="2" />
				 name="firstName" value="Jane" />
				 name="lastName" value="Smith" />
			>
		>
	>
>

Within the application when a Student is added we also validate the details entered. A simple Student Validator is created and referenced from the configuration XML.

 id="studentValidator" class="uk.co.eggsylife.validation.StudentValidator" />

Finally we tell Spring the location of our ValidationMessages message properties file. If the user enter any details incorrectly we can raise an error for the field entered and specify a message code for the error. Spring will then look up that message code from the ValidationMessages.properties file

 id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
	 name="basenames">
		>
			>classpath:ValidationMessages>
		>
	>
	 name="cacheSeconds">
		>60>
	>
>

The app-config is now completed.

Tiles setup and JSP file

Earlier in the tutorial we referenced the location of the Tile definitions, ‘/WEB-INF/tile-defs/tile-defs.xml’. This file declares all the views the web application uses and is crucial to making Spring JS and partial rendering function correctly.

Firstly we define an overall template that can be be used for any views our application requires. Declaring a template allows you to re-use the styling across multiple views.

 name="template.view" template="/WEB-INF/pages/templates/template.jsp">
	 name="content" value="/WEB-INF/pages/blank.jsp" />
>

The ‘template.jsp’ file is pretty basic. It simple declares the HTML headers. Each time we change the ‘content’ of this Tile definition it will continue to be surrounded by the markup on the template.jsp.

Spring-JS Edit Dialog and Partial JS Example

Spring Edit Dialog and Partial Content Update Tutorial

This means that every page will have the title set as above and every page will have the ‘Spring Edit…..’ paragraph present. Also note we are including the various Spring required Javascript files. By default they are located in the /resources/ folder of the web application. They are required in order to make Spring-JS Ajax functions work.

In this example I have also included the Dojo Tundra theme to improve the look and feel of the sample application but this is by no means required.

The tutorial only has one screen which lists students and should look similar to figure 1.

Figure 1

This screen simply lists the students and provides a link for the user to add a new student. When a new student is added we don’t navigate away from the page we simply append the student to the bottom of the list.

 name="students.view" extends="template.view">
	 name="content" value="studentsList.view" />
>
 
 name="studentsList.view" template="/WEB-INF/pages/students.jsp">
	 name="studentsList" value="/WEB-INF/pages/studentList.jsp" />
	 name="studentEditDialog" value="/WEB-INF/pages/util/dialogClose.jsp" />
>

We firstly declare the overall ‘students.view’ which extends our default template as mentioned earlier. This view is actually a template itself and requires two entries – a list of students and a student edit dialog. The ‘students.jsp’ file is as follows:

<%@ include file="/WEB-INF/pages/include.jsp" %>

The ‘students.jsp’ doesn’t contain much other than the inclusion of the two areas of content. ‘studentList’ and ‘studentEditDialog’. First of all lets look at the ‘studentList.jsp’ file which we inject into the ‘studentsList’ attribute.

<%@ include file="/WEB-INF/pages/include.jsp" %>
 
 

	
				
		
			
				
					Student ID
				
				
					First name
				
				 
					Last name
				
			
		
		
			
					
						${student.studentNumber}
					
					
						${student.firstName}
					
					
						${student.lastName}
					
				
			
		
	
 
	
		Create new student

Student ID	First name	Last name
${student.studentNumber}	${student.firstName}	${student.lastName}

The view simply lists each student in a table and provides a link to be able to add students. There are two main things to note on this JSP. Firstly notice that it is wrapped in a ‘DIV’ element with the same id as the tiles attribute defintion, ‘studentsList’. This is crucial to making Spring partial refresh work. Also note the way in which we ‘decorate’ the ‘Create new student’ link with Spring Javascript.

Firstly we declare the ‘dojo.addOnLoad’ function. This means that this piece of Javascript will execute when the page loads. Next we use the ‘Spring.addDecoration’ method to add the Ajax decorations. This function takes a number of parameters. Firstly the ‘elementId’ This is the id of the element that we attach the decoration to. In this case we are attaching the decoration to the ‘Create new student’ link. The event is then specified. We want the Ajax actions to run when the link is clicked so we specify the ‘onclick’ event. Next we set the ‘popup’ variable to ‘true’. This means that whatever the response is we want it rendered as a popup dialog.

The final parameter is ‘fragments’. This identifies which areas of content we want refresh. We state that we want both the ‘studentsList’ and the ‘studentEditDialog’ updated. Notice the names match our tiles attributes and that we wrap the ‘studentsList.jsp’ in a DIV with the id of ‘studentsList’. This way Spring knows how to identify content and replace it.

Now lets look at the ‘studentEditDialog’ content. In this instance we are injecting a utility JSP file that closes any open dialogs. The JSP is basically a bit of Javascript that closes any open Dojo popup dialogs. When first listing the students it is not particularly useful as we haven’t got any open dialogs. However when we save a new student a redirect to the students list view the JSP’s use will become clear.

The last tile definition is the view that contains our full student edit dialog. The dialog allows users to create a new student, asking for the student name and id number.

 name="studentsListAndEditDialog.view" extends="studentsList.view">
	 name="studentsList" value="/WEB-INF/pages/blank.jsp" />
	 name="studentEditDialog" value="/WEB-INF/pages/studentEditDialog.jsp" />
>

The only difference with this definition is the that we switch out the ‘dialogClose.jsp’ with the actual student edit dialog. The student edit dialog is as follows:

<%@ include file="/WEB-INF/pages/include.jsp" %>
 
 

	Student Edit Dialog
 
	
		
			
				Student number
				
					
				
			
			
				First name
				
					
				
			
			
				
					
				
			
			
				Last name

Figure 2

Again, notice we wrap the content in a DIV element with the same id as our tiles attribute, ‘studentEditDialog’. We then go on to declare a Spring form. For now I won’t go on to discuss the Spring MVC and form bindings. Finally note we attach the Spring decorations again. The only difference is this time we specify a form id and remove the popup attribute. We attach the code to the ‘Save student’ button which is the submit button for the ‘studentForm’. This means that we want our Ajax events to be actioned when the form is submitted.

That concludes our view definitions. The tiles-defs.xml, students.jsp, studentsList.jsp, dialogClose.jsp and studentEditDialog.jsp.

Java Controllers

The tutorial only has one controller. The ‘StudentController’ handles the three primary functions of the application. It handles the showing of the students list (GET), the showing of the edit dialog (GET) and the adding of a student (POST).

The list of students is handled by the ‘showStudentsList’ method.

private static final String STUDENTS_VIEW_KEY = "students.view";
 
@Autowired
protected ArrayList<Student> students = null
 
 
@RequestMapping(value="/students", method=RequestMethod.GET)
public String showStudentsList(ModelMap modelMap) {
	modelMap.put("students", students);
	return STUDENTS_VIEW_KEY;
}

It simply adds our list of students to the view and returns the ‘students.view’ tile definition. The list of students is Autowired from our Spring app-config file as defined earlier. It is wired to handle the URL ‘/students’.

Secondly there is the ‘showStudentEditForm’ method. This handles the URL ‘/students/edit’ and is called when the user clicks the ‘Create new student’ link.

 
private static final String STUDENT_EDIT_DIALOG_VIEW_KEY = "studentsListAndEditDialog.view";
 
@RequestMapping(value="/students/edit", method=RequestMethod.GET)
public String showStudentEditForm(ModelMap modelMap) {
 
	// Object class will be used as our
	// form backing object
	Student student = new Student();
	modelMap.addAttribute("student", student);
 
 
	return STUDENT_EDIT_DIALOG_VIEW_KEY;
}

It returns the ‘studentsListAndEditDialog.view’ and adds a new ‘Student’ object to the view for our form. This object is used as the form backing object. The Student object is a POJO and will be seen later. Finally we have the ‘saveStudentEdit’ method that is actioned when the form is submitted. If the form is submitted without errors then it simply returns the same view as the listing of the students. If the user submits the form and it contains errors then it returns the edit form view with details of the error.

 
@Autowired
protected StudentValidator studentValidator = null;
 
@RequestMapping(value="/students/edit", method=RequestMethod.POST)
public String saveStudentEdit(@ModelAttribute Student student, BindingResult errors, ModelMap modelMap) {
 
	studentValidator.validate(student, errors);
 
	if( errors.hasErrors() ) {
		return STUDENT_EDIT_DIALOG_VIEW_KEY;
	}
	else {
		students.add(student);
 
		modelMap.put("students", students);
 
		return STUDENTS_VIEW_KEY;
	}	
}

Notice if the form doesn’t have errors we add the student object back into the collection of students and update the list of students in the view. This is important so that the list of students is updated with the student that has just been added. The utility JSP that closes any open Dojo modal dialogs now comes into full use as it makes sure that the edit student dialog is closed after a student has been successfully added. The method responds to the POST request method so it is actioned when our form is ‘POSTED’. The complete StudentController includes all the above methods.

The Validator and Student POJO

To wrap things up the final two Java classes the application uses is the StudentValidator and the POJO Student object.

The validator simply checks that the user has entered both a first name and last name. The Student object encapsulates items a student has.

public class StudentValidator implements Validator {
 
	/* (non-Javadoc)
	 * @see org.springframework.validation.Validator#supports(java.lang.Class)
	 */
	@Override
	public boolean supports(Class clazz) {
		return Student.class.equals(clazz);
	}
 
	/* (non-Javadoc)
	 * @see org.springframework.validation.Validator#validate(java.lang.Object, org.springframework.validation.Errors)
	 */
	@Override
	public void validate(Object obj, Errors errors) {
		Student student = (Student)obj;
 
		if( student.getFirstName() == null || student.getFirstName().length() == 0 ) {
			errors.rejectValue("firstName", "student.first.name.empty");
		}
 
		if( student.getLastName() == null || student.getLastName().length() == 0 ) {
			errors.rejectValue("lastName", "student.last.name.empty");
		}
	}
 
}

public class Student {
 
	private Long studentNumber = null;
	private String firstName = null;
	private String lastName = null;
 
 
	public Long getStudentNumber() {
		return studentNumber;
	}
	public void setStudentNumber(Long studentNumber) {
		this.studentNumber = studentNumber;
	}
 
	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
 
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
}

Conclusion

That should have gave you a complete example on how to use Spring-JS alongside Spring MVC and perform partial refresh of the content. The key to understanding the tutorial is understanding the tie between between the tiles defintions, the identified DIV elements and the usage of Javascript to link the two together.

The project can be downloaded as a Zip from GitHub. For those familiar with Git you can also get the project from the Git Repository under the URL ‘git://github.com/eggsy84/SpringPopupRefreshList.git’. If anyone would like to comment or have anything to contribute to the codebase please let me know.

Spring Forms, Dynamic Lists and Ajax

admin — Mon, 30 Nov 2009 09:11:15 +0000

Spring Forms and Dynamic Binding Lists

Introduction

After my recent posts on Spring forms and annotations – dynamic lists is logically another step to be discussed.

In the previous examples we use a form backing object – the form backing objects have tended to be very basic and primitive

Using dynamic lists within these objects makes them slightly more complicated. Suppose the following scenario:

Class enrolment example

User chooses to create a new class
User types in class name
User also has to specify one (or many) names of students in the class

Using that scenario you can imagine a form in which there is a class name field and then below that a simple student name field. When the user clicks add next to the student name – javascript should simply show another input field for a student name allowing a user to add one or more students.

Eventually when the form gets submitted to the server a list of students will be populated.

However if we don’t using Spring’s dynamic lists – specifically Spring’s AutoPopulatingList – we cannot perform such an action as we have out of bounds errors.

Configuring your build environment

Your workspace needs setting up as the previous examples. Using Eclipse create a new project. For your src directory enter the value /WEB-INF/src. For your output directory use the WEB-INF/classes directory.

Add a new lib directory in your WEB-INF folder. Under your WEB-INF directoy you will need the following JAR files (all of which can be obtained from the Spring download). Add the jars to your buildpath.

commons-beanutils.jar
commons-collections.jar
jstl.jar
spring-core.jar
spring-webmvc.jar
spring.jar
standard.jar
tiles-api-2.0.6.jar
tiles-core-2.0.6.jar
tiles-jsp-2.0.6.jar

Next add the Spring servlet.xml to your application. Create a file called dynamiclists-servlet.xml in your WEB-INF folder. Add the following to the file:

 version="1.0" encoding="UTF-8"?>
 xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans 
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/context 
                           http://www.springframework.org/schema/context/spring-context.xsd">
 
 
 
     base-package="com.annotations.controller" />
     class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>
     class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
 
    
     class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter" />
 
     id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
         name="definitions">
	    >
		>/WEB-INF/tiles-defs/templates.xml>
	    >
	>
    >
 
     id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
	 name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView"/>
    >                
>

Next add your web.xml in the same location as your Spring servlet.xml file. Add the following contents:

 version="1.0" encoding="ISO-8859-1"?>
 version="2.4"
		 xmlns="http://java.sun.com/xml/ns/j2ee"
		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 
	>Spring Dynamic Lists Example>
 
 
	>
		>dynamiclists>
        	>org.springframework.web.servlet.DispatcherServlet>
        	>1>
	>
 
	>
    		>dynamiclists>
    		>*.page>
    	>
 
 
>

Next add a new folder in your WEB-INF directory called tiles-defs and add a file called templates.xml within that. Add the following to the templates.xml file

 version="1.0" encoding="ISO-8859-1" ?>

       "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">
 
>
 
	 name="form.view" template="/pages/form.jsp">
	>
 
	 name="formStudentInsert.view" template="/pages/formStudentInsert.jsp">
	>
 
	 name="formResult.view" template="/pages/formResult.jsp">
	>
 
>

That should be the workspace setup – next to create our form JSP pages

Form JSP pages and a touch of jQuery

Firstly create a new folder under your application called js. Next download jQuery and place the jQuery download within the folder.

Under your project create a new folder names pages and create a file named form.jsp within that.This will be our class creation form.

Add the following to your form.jsp file

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
 


 

	
		
			Class Name:
			
		
		
			Students
		
		
			Student name

This probably requires a bit of an explanation. The first two lines of the file include the required Spring tag libraries.

After that we include the link to our downloaded jQuery Javascript source. I’ll make an assumption that people are familiar with jQuery.

Next we use jQuery to add a click event listener to our form ‘Add’ button. When the user clicks add button we fire off an Ajax Get request to our server which sends an incremented number as part of its data string. This Ajax request hits our server which simply appends a new row to the form for another student name. We use the number for the index number in the collection of students.

The response is simply appended as a new row in our form before the form submit button. After that Javascript the rest is a basic Spring form.

Next create a new file called formStudentInsert.jsp in the same location as your form.jsp and add the following contents.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

As mentioned before this is JSP that gets appended to our form when we send the Ajax request.

The form should look similar to the image below.

Next create a JSP page that is displayed when the user submits the form. Create a new JSP called formResult.jsp and add the following contents.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
Class ${savedClass.className}
 
Students
 

	
		${student.studentName}

The Form Backing Object

We next need to create the form backing objects that will be used for this example. Create a new Java class called Student and add the following contents:

/**
 * @author Eggsy - eggsy _at_ eggsylife.co.uk
 *
 */
public class Student{
	private String studentName = null;
 
	public String getStudentName() {
		return studentName;
	}
 
	public void setStudentName(String studentName) {
		this.studentName = studentName;
	}
 
}

This class is a simple Student object. Student objects will belong to a class object. Now we can go ahead and create the Class object.

Create a new class called ClassCommand and add the following:

import org.springframework.util.AutoPopulatingList;
 
/**
 * @author Eggsy - eggsy _at_ eggsylife.co.uk
 *
 */
public class ClassCommand {
	private String className = null;
	private AutoPopulatingList students = null;
 
 
	public String getClassName() {
		return className;
	}
 
	public void setClassName(String className) {
		this.className = className;
	}
 
	public AutoPopulatingList getStudents() {
		return students;
	}
 
	public void setStudents(AutoPopulatingList students) {
		this.students = students;
	}
}

The class command object is the backing object we shall use for our form. It simply has a class name. However it does also have a list of students. For this we could have used a basic java.util.ArrayList but this causes issues when attempting to bind the form. As the list wouldn’t (initially) have any contents we would experience IndexOutOfBounds exception messages. This is where we can use the incredibly helpful Spring AutopopulatingList.

Spring Annotated Form Controller

Finally we need to create the Spring Form controller that handles our various requests. Note in the servlet XML file we specified that we would scan the package com.annotations.controller package for controller annotations. Go ahead and create this package. (You can of course change this). Now create a class called ClassFormController containing the following:

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.util.AutoPopulatingList;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
 
import com.annotations.command.ClassCommand;
import com.annotations.command.Student;
 
 
/**
 * @author Eggsy - eggsy _at_ eggsylife.co.uk
 */
@Controller
public class ClassFormController
{
 
	@ModelAttribute("classCommand")
    	public ClassCommand getClassCommand()
    	{
		ClassCommand classCommand = new ClassCommand();
		classCommand.setStudents(new AutoPopulatingList(Student.class));
		return classCommand;
    	}
 
	/**
	 * Called when the form is initially displayed
	 * @param model
	 * @return
	 */
	@RequestMapping(method = RequestMethod.GET, value="/processClassForm.page")
	protected String showNameForm(ModelMap model)
	{	
		return "form.view";
	}
 
	/**
	 * Called when the user clicks the add button
	 * @param fieldId
	 * @param model
	 * @return
	 */
	@RequestMapping(method = RequestMethod.GET, value="/appendStudentView.page")
	protected String appendStudentField(@RequestParam Integer fieldId, ModelMap model)
	{	
		model.addAttribute("studentNumber", fieldId);
		return "formStudentInsert.view";
	}
 
	/**
	 * Called when the user finally submits the class form
	 * @param classCommand
	 * @param model
	 * @return
	 */
	@RequestMapping(method = RequestMethod.POST, value="/processClassForm.page")
	protected String onSubmit( @ModelAttribute("classCommand") ClassCommand classCommand,  ModelMap model )
	{
		model.addAttribute("savedClass", classCommand);
		return "formResult.view";
	}
 
}

I’ll assume you’re comfortable with Spring annotations so I’ll just highlight the important parts. Firstly notice the way we declare our ClassCommand object. We new up the object then set the Students list as a new AutoPopulatingList of type Student.class. This is again so that we can ensure we experience no IndexOutOfBounds errors. The next method is called when we display our form simply returning the form.view. After that we have the method that gets called when the user clicks the Add button. This returns the small HTMl snippet that gets appended to our form. Finally we have the onSubmit method that gets called when we submit our form and returns the formResult view.

Ok so thats pretty much it. If you followed the examples word for word you after setting up your web application you should be able to visit http://localhost:8080/dynamiclists/processClassForm.page and test your web app.

You can also download the example project here within the project there is a docs folder that also includes a sample Tomcat context file for application deployment.

References: http://blog.richardadamdean.com/?page_id=119

Any comments or questions are always welcome!

Ajax Spring Forms with Annotations and jQuery

admin — Thu, 12 Nov 2009 10:30:48 +0000

In one of my previous posts we documented how to implement Spring Annotations with a form. If you haven’t got a copy of the project from that post you can grab it here.

Building on that example this guide shows how, using Spring and jQuery, you can Ajaxify your forms so that when submitted the user doesn’t have to be redirected to a new page

jQuery and required plugins

Create a new folder in the root of your project and call it ‘js’

Then grab a copy of jQuery. The minified version will be fine. Add the jQuery javascript file to your ‘js’ folder.

Currently it is at version 1.3.2 so I have a file called jquery-1.3.2.min.js in my js folder

Next download a very useful plugin the jQuery Form Plugin. Also place the plugin in your js folder.

Linking your JS

Open the form.jsp file and add the following lines:

Here we are linking to the two jQuery javascript files we have just downloaded. Note I reference /annotations/ that is my application name yours may however be different.

Convert the form to Ajax

This step involves using the jQuery form plugin to make your form submit via Ajax. After including the scripts add the following code:

<script type="text/javascript">
	$(document).ready(function() { 
		var formOptions = {target: '#nameFormResponse'};
		$('#nameForm').ajaxForm(formOptions);
	});
script>

This assumes you are quite comfortable with jQuery but just to explain, in the above code we are saying that when the document is read fetch the form with the id of nameForm and convert it to an ajaxForm (The ajaxForm function is built into the form plugin we download). We are also specifying some options for the ajaxForm method namely the target. A target is an jQuery selector that the Ajax Form plugin will automatically populate with the response from your submit

After your form go ahead and add in the div with the same id as the target, in the case above id=”nameFormResponse”.

The whole form.jsp should now look like so:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 


 

 
 

	
		
			Name:

That should be it – so now if you visit http://localhost:8080/annotations/processName.page and submit the form you will see that the page doesn’t change and we render the response of the form submit into our nameFormResponse div element.

You can grab a copy of this project here