In this tutorial you will know how to build the select options with JQuery, We are streaming JSON back to the client for our javascript to use.
Read The Full Tutorial.
In this tutorial you will know how to build the select options with JQuery, We are streaming JSON back to the client for our javascript to use.
Like this code:
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;
}
The JSP showing the JQuery Javascript, Here is the code you can add:
<%@ 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>
|
Ajax Projects
