|
Using JQuery AJAX to populate select options
|
[ print format ] |
jquery-options source code
jquery-options war
Introduction
This example shows two basic things. The main thing it's illustrating is the population of a
set of select options after you
choose an option from a different select options list. The code that builds the select options with JQuery
was
taken directly from this site http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ This example
also demonstrates returning the data as JSON from the controller layer (using Flexjson in Stripes but I show how
it would be donee in Struts as well.) The example source code uses Stripes and it's only meant to illustrate the
'change options' behavior and returning JSON from the server, nothing more, so don't look at it for best Stripes practices
or anything. I'm only showing the relevant code below. Download the source
to get the full implementation. (I use System.out.println in the example so I don't have to get questions about setting up log4j.)
Screen shot:
Screen shot:
Building and Running the Example
Requirements:
To build download the source and unzip then run "ant" in the unzipped directory. You can then move the query-options.war file from the dist directory to your appserver's webapps directory. Start your server and go to http://localhost:8080/jquery-options/
- Java5+
- Tomcat 5+ or a current version of Resin. The container just has to implement at least Servlet 2.4 and JavaServer Pages 2.0 specifications.
- Ant, if you want to build from the source
To build download the source and unzip then run "ant" in the unzipped directory. You can then move the query-options.war file from the dist directory to your appserver's webapps directory. Start your server and go to http://localhost:8080/jquery-options/
CarActionBean.java
Stripe's CarActionBean is similar to an Action and ActionForm in Struts 1.x all rolled into one
(but much better of course:). When the option from the first select list is selected, it will
end up firing this "search" method in our ActionBean. We are then streaming JSON back to the
client for our javascript to use.
If we were doing this in a Struts Action method we'd do something like:
public Resolution search() {
List<Car> cars = carsService.getCars(manufacturerId);
String jsonResult = new flexjson.JSONSerializer().serialize(cars);
return new StreamingResolution("application/javascript", jsonResult);
}
If we were doing this in a Struts Action method we'd do something like:
public ActionForward search(...) {
int manufacturerId = Integer.parseInt(request.getParameter("manufacturerId"));
List<Car> cars = carsService.getCars(manufacturerId);
String jsonResult = new flexjson.JSONSerializer().serialize(cars);
response.setContentType("text/javascript");
response.getWriter().write(jsonResult);
return null;
}
cars.jsp
The JSP showing the JQuery Javascript. It should be pretty self explanatory (assunming you are familiar
a bit with JQuery.) The options collection below is populated by the Stripes ActionBean call to "getManufacturers."
If you were using Struts you'd probably first set that collection of Manufacturer objects in
Request scope before going to this JSP. The "id" and "name" you see in the jquery javascript below comes from
the JSON String that is returned from the server,
and represents the member variables "id" and "name" of the Car value object.
If the Car ojbect had the variables "displayName" and "carID" you'd be using those values instead.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/taglibs.jsp" %>
<html>
<head>
<link href="<c:url value='main.css'/>" rel="stylesheet" type="text/css"/>
<style>td {white-space:nowrap; }</style>
<title>Cars</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$("select#manufacturers").change(function() {
$.getJSON("Car.action?search=",{manufacturerId: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
}
$("select#cars").html(options);
})
})
})
});
</script>
</head>
<body>
<div class="titleDiv">Cars</div>
<stripes:form action="/Car.action">
<stripes:errors/>
<table>
<tr>
<td class="tdLabel"><stripes:label for="label.make.select"/>:</td>
<td>
<stripes:select name="manufacturerId" id="manufacturers">
<stripes:options-collection collection="" label="name" value="id"/>
</stripes:select>
</td>
<td> </td>
<td class="tdLabel"><stripes:label for="label.model.select"/>:
<select name="carId" id="cars"></select>
</td>
</tr>
</table>
</stripes:form>
</body>
</html>