Form with Ajax request

[dany6883]

Hello,

I want to do a search form witha grids of results.
Since I would like just to update the results when the user search I'll do it with an ajax request. But I have a problem, I don't know how to attach the ajax request to the spring flow, it means that I created an object SearchCriteria that I use to get the user inputs:

import java.util.List;

public class SearchCriteria {
	
	

	private String freeFlowText;
	private List<String> hotelType;
	private List<String> brand;
	private List<String> services;
	private Integer meetingRoom;
	private Integer numberGuestRooms;
	private String requiredSize;
	private Boolean showCompetitors;
//get and set...

in my home.jsp I have:

	<form:form method="post" action="search" commandName="searchCriteria" >
		<div id="freeflowlabel">	
			<p style="text-align:left;">
				<span style="font-family:Arial;font-size:16px;font-weight:bold;font-style:normal;text-decoration:none;color:#333333;">${configProperties['cat.search.title']}</span>
			</p>
		</div>		
		<form:input id="freeFlowInputId" path="freeFlowText" />
		<p></p>
		<div id="advancedSearch">
			<table>
					<tr>
						<th>${configProperties['cat.search.hotelType']}</th>
						<th>${configProperties['cat.search.brand']}</th>
						<th>${configProperties['cat.search.services']}</th>
					</tr>
					<tr>
						<td>
							
							<form:select id="selectHT" multiple="true" path="hotelType">
								<form:option value="All" label="${configProperties['cat.search.ht.all']}" />
								<form:option value="Resort" label="${configProperties['cat.search.ht.resort']}" />
								<form:option value="Convention" label="${configProperties['cat.search.ht.convention']}" />
								<form:option value="Business" label="${configProperties['cat.search.ht.business']}" />
							</form:select>
						</td>
						<td>
							<form:select multiple="true" path="brand">
								<form:option value="All" label="${configProperties['cat.search.b.all']}" />
								<form:option value="Andaz" label="${configProperties['cat.search.b.andaz']}" />
								<form:option value="Grand Hyatt" label="${configProperties['cat.search.b.grandhy']}" />
								<form:option value="Hyatt" label="${configProperties['cat.search.b.hy']}" />
								<form:option value="Hyatt Place" label="${configProperties['cat.search.b.hyp']}" />
								<form:option value="Park Hyatt" label="${configProperties['cat.search.b.phy']}" />
								<form:option value="Hyatt Regency" label="${configProperties['cat.search.b.hyr']}" />
								<form:option value="Hyatt House" label="${configProperties['cat.search.b.hyh']}" />
								<form:option value="Hyatt Vacation Club" label="${configProperties['cat.search.b.hyvc']}" />
							</form:select>
						</td>
						<td>
							<table>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.eh']}" value="Exhibit hall" /></td></tr>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.cc']}" value="Convention Center" /></td></tr>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.g']}" value="Golf" /></td></tr>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.s']}" value="Spa" /></td></tr>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.c']}" value="Casino" /></td></tr>
								<tr><td><form:checkbox path="services" label="${configProperties['cat.search.s.b']}" value="Beach" /></td></tr>
							</table>
						</td>
					</tr>	
					<tr>
						<th>${configProperties['cat.search.meetingRoom']}</th>
						<th>${configProperties['cat.search.requiredSize']}</th>
						<th>${configProperties['cat.search.numGuestRooms']}</th>
					</tr>
					<tr>
						<td>
							<form:input path="meetingRoom" />
						</td>
						<td>
							<form:select path="requiredSize">
								<form:option value="SQFT" label="${configProperties['cat.search.rs.sqft']}" />
								<form:option value="SQM" label="${configProperties['cat.search.rs.sqm']}" />
							</form:select>						
						</td>
						<td>
							<form:input path="numberGuestRooms" />
						</td>						
					</tr>
					<tr>
						<td>
							<form:checkbox path="showCompetitors" label="${configProperties['cat.search.competitors.inc']}" />
						</td>
					</tr>					
				</tr>
			</table>			
		</div>
		<input id="searchButtonId" type="submit" value=${configProperties['cat.search.button']} style="cursor: pointer;">
	</form:form>

and finally I have a service that menage the search

	@RequestMapping(value = "/search", method = RequestMethod.POST)
    public void search(HttpServletResponse response,Model model,@ModelAttribute("searchCriteria") 
    					SearchCriteria searchCriteria) {
		System.out.println("SearchController: Passing through...");
		
		try{
		String freeFlowText=searchCriteria.getFreeFlowText();
		List<String> brands=searchCriteria.getBrand();
		List<String> hotelTypes=searchCriteria.getHotelType();
		Integer numberGuestRooms=searchCriteria.getNumberGuestRooms();
		List<String> services =searchCriteria.getServices();
		Integer sizeMeetingRoom=searchCriteria.getMeetingRoom();
		String requiredSize=searchCriteria.getRequiredSize();
                // do the search and return JSON format results.

I would like to keep the form defined with spring tags form:form and the object SearchCriteria
but I should put in the flow a javascript that do an ajax call handled by the search method (shown before), so instead to have a submit button I should have a button with a javascript call but how can I keep the searchCriteria object? Or how can pass the value?

Daniele

[ozGuy]

If you are using JQuery you can serialize the form and send this form data with AJAX request.
With jQuery you can easily attach click events to buttons and run ajax calls., there are plenty of examples, just ask google

The SearchCriteria object needs to be in the session and spring will bind the parameters with name searchCriteria.xxx for you.

[dany6883]

If you are using JQuery you can serialize the form and send this form data with AJAX request.
With jQuery you can easily attach click events to buttons and run ajax calls., there are plenty of examples, just ask google

The SearchCriteria object needs to be in the session and spring will bind the parameters with name searchCriteria.xxx for you.

I'm using YAHOO YUI and not jQuery, how can I put the onject in the session? it's enought to put @SessionAttribute when you start the definition of the class SearchCriteria ?

could you provide me an example on how to serialize...

thanks
Daniele

[Marten Deinum]

You don't need the object on the session. Simply serialize the form and make sure you have Jackson on your classpath. That should transform from and to classes. I suggest a read of the reference guide especially the explanation of @ResponseBody/@RequestBody...

[dany6883]

Hello If I simply serialize the form in the body of a POST message I receive an exception because

application/x-www-form-urlencoded format is not supported by spring. I'm using YUI and I don't see any way to serialize a form with JSON format...

Should I go for the retrieve of all the form element and build by myself the JSON format to send ? And then use an Ajax base request to send it ?
thank you
Daniele