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:

<script type="text/javascript" src="/annotations/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/annotations/js/jquery.form.js"></script>

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" %>
 
<script type="text/javascript" src="/annotations/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/annotations/js/jquery.form.js"></script>
 
<script type="text/javascript">
	$(document).ready(function() { 
		var formOptions = {target: '#nameFormResponse'};
		$('#nameForm').ajaxForm(formOptions);
	});
</script>
 
 
<form:form method="post" name="nameForm" id="nameForm" commandName="nameCommand">
	<table>
		<tr>
			<td>Name:</td>
			<td><form:input path="name" size="40" /></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" value="Send my name" /></td>
		</tr>
	</table>
</form:form>
 
<div id="nameFormResponse">
</div>

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