Grails: Load data on one ComboBox depending on another

Question

Let's say I have a combobox with the options GENERAL, AIR, GROUND, and SEA

<g:select name="group" from="${['GENERAL', 'AIR', 'GROUND', 'SEA']}" valueMessagePrefix="default.category" value="${tipoN}" />

And then another combobox that loads certain information depending whether you select GENERAL, AIR, GROUND, or SEA.

Let's say GROUND has 3 options, FedEx, USPS, DHL, but AIR has complete different ones, AIRPLANE, JET, HOT AIR BALLOON.

The name of the other <g:select> should be "commodity"

I thought about creating a javascript file and treating everything like HTML but I did some google research and is not as simple as I thought.

Does anyone know what would be the best way to do this?? Thanks in advance!

FG

Answer 1

Sounds like you'll want to use AJAX for this. One way you could do it is by using a combination of templates, and domain objects:

// grails-app/domain/ShippingOption.groovy

class ShippingOption = {
    String method, // can be 'ground', 'sea', 'air', or 'general'
           name    // can be 'fedex', 'ups', etc.

    def options = {
        def meth = params.method ?: "general"
        def comList = ShippingOption.findByMethod(meth)
        render(template:"shippingList", model: [ commodityList: comList ])
    }
}

And the template:

<!-- grails-app/views/_shippingList.gsp -->
<g:each var="opt" in="${commodityList}">
    <option value="${opt.name}">${opt.name}</option>
</g:each>

And in your gsp with the select box on it:

<!-- ... other stuff is before here ... -->
<g:select name="method" from="${['GENERAL', 'GROUND', 'SEA', 'AIR']}"
    onchange="${remoteFunction(action:'options', update:'commodity', 
        params:''method=' + this.value' )}" />
<select id="commodity"></select>

I'm sure I've messed up some syntax, and you'll definitely have to refactor this a bit to work with your code. But at least you've got the general idea.

And to use them, add them to the database as ShippingOptions. Here's one way to do it.

["fedex", "ups"].each { name ->
    def so = new ShippingMethod(method: "ground", name: name )
    so.save()
}

PS: You'd also be able to render the shipping methods dynamically, as well.

See also: remoteFunction, g:select, templates, and AJAX

Answer 2

I would consider re-designing your UI and changing the flow. A drop-down dependency that you are describing suggests the form should probably be split and adopting a 'wizard-like' solution will result in a more user-friendly and solid solution that will work also without JavaScript.

Answer 3

I have a worked example using AngularJS and Grail here:

http://wordpress.transentia.com.au/wordpress/2013/12/24/keeping-up-with-the-joneses/

(apologies if this is not appropriate SO 'style', but I dont' think that posting 100s of lines of code and verbiage is appropriate, either).