Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 336

Figure 15.7: Initial form before selecting a car make
Using Partial Forms
By now you've realized that using Ajax and updating page fragments is
easy and fun but also introduces new challenges. Another one of these
is the use of page fragments with form input controls that are to be
inserted back into an existing form, after an Ajax request.
Consider the form in Figure 15.7 , which has select boxes to choose a
car make and model. After a make is selected in the first box, an Ajax
request is sent to update the models in the second box. The result after
selecting a car make is shown in Figure 15.8 , on the next page.
In Figure 15.9 , on page 350 , we can see how the onchange= event on
the car make select box triggers an Ajax request with the make sent
as a parameter. The server responds with the car model select box,
populated with the models that correspond to the selected car make.
The model and action bean for this example are straightforward:
Download ajax/src/stripesbook/model/Cars.java
package stripesbook.model;
public class Cars extends HashMap<String,List<String>> {
public Cars() {
put("Acura", Arrays.asList("CSX", "MDX", "TL", "TSX"));
put("Ford", Arrays.asList("Escape", "Explorer", "Focus", "Mustang"));
put("Honda", Arrays.asList("Accord", "Civic", "CR-V", "S2000"));
put("Porsche", Arrays.asList("911 Carrera", "Boxster"));
}
}