In web application development, use of frameworks has become essential . One of those frameworks which help us in making things simpler and life easy is jQuery.

Why jQuery ?

• Fully Documented
• Great Community
• Tons of plugins
• Small size(14kb)
• Everything works in IE 6+,Firefox,Safari 2+,and Opera 9+

jQquery is a very efficient framework which helps us in developing many things in a much easier way than they would be without using any framework.

At IntelliGrape we are using Grails and jQuery on a project.

In this blog, I want to share one of my experiences that I had met in this course of time. A series of mails/questions in Grails mailing list on creating chained selects/drop-downs prompted me to write this blog; since I had already done this.

Chain select basically means populating the next drop-down on the basis of what you select in the present drop-down.

In this example, we have two drop-downs – manufacturer and model. We want the model drop-down to be populated on the basis of what the user selects in the manufacturer drop-down, without doing a full page refresh, using an Ajax call.

Here are my classes, not the whole class but a part of the class

Vehicle Class

public  class Vehicle {
  Manufacturer manufacturer
  Model model
}

The Manufacturer and model classes look like this

Manufacturer Class

public class Manufacturer {
  String manufacturerName
  static belongsTo = Vehicle
  static hasMany = [models: Model]
}

Model Class

public class Model {
  String modelName
  static belongsTo = Manufacturer
}

For this the vehicleCreate.gsp should look like this /vehicle/create.gsp

            Home
            Vehicle List
Create Vehicle

${flash.message}
<table>
<tbody>
<tr>
<td valign="top"><label for="vehicleName">Vehicle Name:</label></td>
<td valign="top"></td>
</tr>
<tr>
<td valign="top"><label for="vehicleManufacturer">Manufacturer</label></td>
<td valign="top"><g:select id="vehicleManufacturerDropDown" optionKey="id"
                                     from="${VehicleManufacturer.list()}"
                                     name="vehicleManufacturerDropDown" value=""/></td>
</tr>
<tr>
<td valign="top"><label for="model">Model</label></td>
<td valign="top"><g:select id="model" optionKey="id"
                                       from="${VehicleModel.list()}"
                                       name="model" value=""/></td>
</tr>
</tbody>
</table>

$(document).ready(function() {
      $("#vehicleManufacturerDropDown").change(function() {
      $.ajax({
              url: "/ChainDropDown/vehicle/manufacturerSelected",
              data: "id=" + this.value,
              cache: false,
              success: function(html) {
              $("#models").html(html);
              }
            });
         });
       });

 Now we will look at how this chained selection works using jQuery.Now what all we are left-out with is
handling this event in the VehicleController which is as simple as any other controller action.
Just add manufacturerSelected action in the controller and we are done!

VehicleController

class VehicleController {
  def manufacturerSelected = {
    def manufacturer = VehicleManufacturer.findById(params.id)
    render g.select(optionKey: 'id', from: manufacturer.models, id: 'model', name: "model")
  }
}

You can download the complete source code for a working sample app with the examples used in this blog. Hope this helps somebody. Pradeep Garikipati