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

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 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).

Answer 3

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.