3

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

randomizertech
  • 2,309
  • 15
  • 48
  • 85

3 Answers3

3

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

Pat
  • 2,228
  • 3
  • 24
  • 33
  • But where do I give each "method" the options?? I get the general idea, I'm just a little lost. Like where do I give each one the options? – randomizertech Sep 22 '10 at 20:32
  • That last piece of code where should it go?? In the controller?? – randomizertech Sep 24 '10 at 13:50
  • Also, the code for the `g:select` seems to be the first one, what happened with the second?? I'm sorry I'm a little lost :/ – randomizertech Sep 24 '10 at 13:58
  • The last piece of code can go anywhere you want it. Maybe in the BootStrap.groovy file? If you don't want to add them via code, you can always use scaffolding and add them manually. The second select is the one with the id of "commodity". Since you're updating it via AJAX, you don't need it to be a `g:select`. – Pat Sep 27 '10 at 14:49
  • Ok, I'm a little lost. The second box is not loading, but the first one is. GENERAL, GROUND, AIR, SEA. Should be the first box. And then depending on each one, different things should be available to select on the second dropdown box. Where, in the code you gave me, do I declare those different options?? The last piece of code?? – randomizertech Sep 27 '10 at 19:00
  • You'll need to make sure the different options are in the database - that's where its pulling it from. The closure working on `['fedex', 'ups']` will dynamically add them. If you add that to your BootStrap.groovy file, it will automatically add them to the database once the application is loaded. I wish I could offer more help, but its hard to debug the problem without being able to see the code. – Pat Sep 28 '10 at 00:45
  • Where do I declare the options for the rest of the "methods". I see only general is described, what happened with the others?? – randomizertech Sep 29 '10 at 15:21
  • Also I'm getting an error when loading that code :( Exception Message: startup failed: C__Documents_and_Settings_density_grails_app_views_density__search_gsp: 20: expecting ')', found 'method' @ line 20, column 395. update:'commodity', params:''method=' + ^ 1 error – randomizertech Sep 29 '10 at 15:21
  • For the error, trying playing around with the quotes in the params property. There may be an extra one in there. For the other "methods", you'll have to add them as you need them. You can do that via the closure on the list object (`['fedex', 'ups'`), or you can manually add them in. – Pat Sep 30 '10 at 18:41
  • Wouldn't the options method need to be in a controller vs. a domain object? – Brad Rhoads Dec 19 '10 at 09:32
  • You could put it in either the controller or the domain object. Of course, the Grails methodology probably says to put it in the controller. But, it still works either way. – Pat Dec 28 '10 at 14:33
  • It's working for me, but on my edit screen I need to populate this field and keep selected the one whom is selected on the database. How can I do that as my option are into another gsp? – Igor Jun 07 '15 at 19:43
0

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

Bob Brown
  • 930
  • 2
  • 7
  • 14
  • Found a plain chained select tutorial here http://grails.asia/grails-chained-select---load-data-on-one-dropdown-box-depending-on-another – JavaDev Jan 27 '15 at 09:49
0

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.

mfloryan
  • 7,667
  • 4
  • 31
  • 44
  • Explain, I don't get what you are trying to say. I'm open to any suggestions. But I need the user to select an option and then depending on that have certain options. – randomizertech Sep 24 '10 at 18:59
  • I assume the two drop-downs are to be on the same page and hence the problem. I'm suggesting that perhaps you could redesign the interface and create an alternative flow through the UI such, that does not require a dependant select drop-downs.. – mfloryan Sep 24 '10 at 21:08