List controls with dependecies

This document describes the practical usage for our JSP-JavaScript integration taglibs. Suppose we have two select controls when any selection on the first (master) list must lead to the new list of options in the second (slave) control. Sure you've faced the similar tasks many times in your projects.

What can we do here? Actually all the steps are obvious. Our master select control will call some JavaScript function that indicates a new selection. This JavaScript function must lead to some server side stuff (JSP or servlet) where we will calculate a dependent list of options. In other words our server-side element will calculate a new list of options for our slave select control. And because the call was originated from the JavaScript our server side calculation must return somehow the JavaScript too.

It is exactly what our JavaScript integration taglib is doing. Let us see the code. Our main file contains two HTML select control. Master list (DHTML id is s1) contains a list of countries. Our slave list (DHTML id is s2) contains a list of cities.

We define JavaScript function changeList and the code for this function will be calculated in JSP file newList.jsp. It is jscall custom tag. See JavaScript integration taglib description.

This function will be called in case of changes in the master list and we will pass two parameters: selected index in the master list (parameter's name is index) and DHTML for the slave control (parameter's name is list).

Actually this JavaScript call will cause HTTP GET request to newList.jsp. And our query string will keep the above mentioned parameters.

<%@ taglib uri="taglib.tld" prefix="j" %>

<j:jscall name="changeList" url="newList.jsp"/>

<select id="s1" onChange="changeList('index',this.selectedIndex,'list','s2')">
  <option value="Russia">Russia</option>
  <option value="USA">USA</option>

<select id="s2">
  <option value="Moscow">Moscow</option>
  <option value="Novosibirsk">Novosibirsk</option>

In our server-side element (newList.jsp) we will calculate a list of options (cities) for our slave control and render JavaScript code that updates our list. Here we will use another taglib from our Coldtags suite. This taglib (List filling) outputs JavaScript code that changes some HTML select control.

<%@ taglib uri="taglib.tld" prefix="f" %>

java.util.List v = new java.util.ArrayList();

// index for the selection in our master list
String index=request.getParameter("index");

// DHTML id for the master list
String list = request.getParameter("list");

// let us create a new list of options

if ("0".equals(index)) // Russia
else // USA
   v.add("New York");
   v.add("San Diego");


<f:listfill id="<%=list%>" source="<%=v%>" script="false"/>

At the end of the deal we will have the following:

Here all the calculation was done right in JSP. But of course, you can follow to the MVC approach too. Sure, you can define the above mentioned function through some servlet (controller, Struts action):

<j:jscall name="changeList" url="/servlet/MVC"/>

This servlet will calculate a new list of options and for example forward the control to the above mentioned JSP file where the same JavaScript code will be rendered.

That is all. The only question is it Ajax or not? See, there is no XML in our code :-)

 © Coldbeans   Comments?

See also Other tips from Coldbeans.