{"id":16,"date":"2008-07-17T20:56:02","date_gmt":"2008-07-17T15:26:02","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=16"},"modified":"2015-07-24T17:11:19","modified_gmt":"2015-07-24T11:41:19","slug":"using-jquery-and-grails-to-create-chained-selects-drop-downs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/using-jquery-and-grails-to-create-chained-selects-drop-downs\/","title":{"rendered":"Using jQuery and Grails to create chained selects \/ drop-downs"},"content":{"rendered":"<p>In <a title=\"Grails Web Application Development Services\" href=\"http:\/\/www.tothenew.com\/grails-application-development\">grails web application development<\/a>, use of frameworks has become essential . One of those frameworks which help us in making things simpler and life easy is jQuery.<\/p>\n<p><strong>Why jQuery ?<\/strong><\/p>\n<ul>\n<li>Fully Documented<\/li>\n<li>Great Community<\/li>\n<li>Tons of plugins<\/li>\n<li>Small size(14kb)<\/li>\n<li>Everything works in IE 6+,Firefox,Safari 2+,and Opera 9+<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>At <a title=\"TO THE NEW\" href=\"http:\/\/www.tothenew.com\">TO THE NEW Digital<\/a>\u00a0we are using Grails and jQuery on a project.<\/p>\n<p>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.<\/p>\n<p><strong>Chain select <\/strong>basically means populating the next drop-down on the basis of what you select in the present drop-down.<\/p>\n<p>In this example, we have two drop-downs &#8211; <strong>manufacturer <\/strong>and <strong>model.<\/strong> We want the <strong>model<\/strong> drop-down to be populated on the basis of what the user selects in the <strong>manufacturer<\/strong> drop-down, without doing a full page refresh, using an Ajax call.<\/p>\n<p>Here are my classes, not the whole class but a part of the class<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Vehicle Class<\/strong><\/span><\/p>\n<p>[java]<br \/>\npublic  class Vehicle {<br \/>\n  Manufacturer manufacturer<br \/>\n  Model model<br \/>\n}<br \/>\n[\/java]<\/p>\n<p>The Manufacturer and model classes look like this<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Manufacturer Class<\/strong><\/span><\/p>\n<p>[java]<br \/>\npublic class Manufacturer {<br \/>\n  String manufacturerName<br \/>\n  static belongsTo = Vehicle<br \/>\n  static hasMany = [models: Model]<br \/>\n}<br \/>\n[\/java]<\/p>\n<p><strong>Model Class<\/strong><\/p>\n<p>[java]<br \/>\npublic class Model {<br \/>\n  String modelName<br \/>\n  static belongsTo = Manufacturer<br \/>\n}<br \/>\n[\/java]<\/p>\n<p>For this the vehicleCreate.gsp should look like this <strong>\/vehicle\/create.gsp<\/strong><\/p>\n<pre>            Home\r\n            Vehicle List<\/pre>\n<h1>Create Vehicle<\/h1>\n<p>[java]<\/p>\n<p>${flash.message}&lt;\/pre&gt;<br \/>\n&lt;table&gt;<br \/>\n&lt;tbody&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;&lt;label for=&quot;vehicleName&quot;&gt;Vehicle Name:&lt;\/label&gt;&lt;\/td&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;&lt;label for=&quot;vehicleManufacturer&quot;&gt;Manufacturer&lt;\/label&gt;&lt;\/td&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;from=&quot;${VehicleManufacturer.list()}&quot;<br \/>\nname=&quot;vehicleManufacturerDropDown&quot; value=&quot;&quot;\/&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;&lt;label for=&quot;model&quot;&gt;Model&lt;\/label&gt;&lt;\/td&gt;<br \/>\n&lt;td valign=&quot;top&quot;&gt;from=&quot;${VehicleModel.list()}&quot;<br \/>\nname=&quot;model&quot; value=&quot;&quot;\/&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<br \/>\n&lt;pre&gt;<br \/>\n[\/java]<\/p>\n<p>[java]<br \/>\n$(document).ready(function() {<br \/>\n      $(&quot;#vehicleManufacturerDropDown&quot;).change(function() {<br \/>\n      $.ajax({<br \/>\n              url: &quot;\/ChainDropDown\/vehicle\/manufacturerSelected&quot;,<br \/>\n              data: &quot;id=&quot; + this.value,<br \/>\n              cache: false,<br \/>\n              success: function(html) {<br \/>\n              $(&quot;#models&quot;).html(html);<br \/>\n              }<br \/>\n            });<br \/>\n         });<br \/>\n       });<br \/>\n[\/java]<\/p>\n<pre> Now we will look at how this chained selection works using jQuery.Now what all we are left-out with is\r\nhandling this event in the VehicleController which is as simple as any other controller\u00a0action.\r\nJust add manufacturerSelected action in the controller and we are done!\r\n\r\n<strong>VehicleController<\/strong>\r\n<\/pre>\n<p>[java]<br \/>\nclass VehicleController {<br \/>\n  def manufacturerSelected = {<br \/>\n    def manufacturer = VehicleManufacturer.findById(params.id)<br \/>\n    render g.select(optionKey: &#8216;id&#8217;, from: manufacturer.models, id: &#8216;model&#8217;, name: &quot;model&quot;)<br \/>\n  }<br \/>\n}<br \/>\n[\/java]<\/p>\n<p>You can <a href=\"\/blog\/wp-ttn-blog\/uploads\/2008\/07\/sample.zip\">download<\/a> the complete source code for a working sample app with the examples used in this blog. Hope this helps somebody. Pradeep Garikipati<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In grails 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":8},"categories":[7],"tags":[4840,9,27],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/16"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}