I want my selects dropdowns to auto populate with Ajax in Grails website

Question

I'm trying to create a "select dependancy dropdown" in Groovy Grails. I want my new users to choose their country, provstate and electrolDistrict from select dropdowns. I've tried the ajaxdependancyselection plugin, but I can only get the country to show up. The ProvState and ElectoralDistricts don't appear in the dropdown. Maybe I should use object graph builder or node builder instead. Any suggestions would be great. thanks.,

Answer 1

Hey I put the plugin together so if you need help with it let me know, sorry had not seen the question until now.

if you can share your domain class info for these 3 classes: country, provstate and electrolDistrict then I Can help you put together what needs to be done.

firstly whats their dependancy like between

    country  : String name, static hasMany = [states:provestate]
    provstate: String ???, 
static belongsTo = [ Country ] 
or ? static belongsTo = [ Country:country ],
 static hasMany= [district: electrolDistrict] 

    electrolDistrict : 
 String ???,
 static belongsTo = [ provstate ] 
or ? static belongsTo = [ state:provstate ],

There is also : https://github.com/vahidhedayati/ajaxdependancyselectexample

Take a look under country view and there are some examples there expanding over 3 selections.

Personally although this solution all works well I found using remoteFunction to be faster over dense tables,

Here is the alternative method which I think I need to incorporate into the plugin at some method, it is only based on two select boxes but you can simply just expand the second selection to a third by adding a remote function to it.....

<div class="smallform">




<div id=SelectCountry class="fieldcontain ${hasErrors(bean: furnitureDonationInstance, field: 'country', 'error')} required">
    <label for="country">
        <g:message code="testcity.country.label" default="Choose Country" />
        <span class="required-indicator">*</span>
    </label>
    <g:select id="country" name="country" from="${com.myprofessions.radpost.Globe.list()}" optionKey="iso"  optionValue="country" required="" value="${params.country}" class="many-to-one"
        noSelection="['null': 'Please choose Country']"
        onchange="${remoteFunction (
        controller: 'selector',
        action: 'findCities',
        params: "'id=' + this.value",
        update: 'cityId'
    )}"
    />
</div>


<div id=SelectCity1 class="fieldcontain ${hasErrors(bean: furnitureDonationInstance, field: 'City', 'error')} required">
    <label for="country">
        <g:message code="testcity.city.label" default="Choose Country" />
        <span class="required-indicator">*</span>
    </label>
    <div id="cityId">
<g:select name="city" id="cityId1" optionKey="id" optionValue="city" from="[]" 
noSelection="['null': 'Please choose Country 11']" />
</div>
</div>

Now having a seperate template called _cities.gsp which contains and will replace cityId div inner content when called by findCities action of a controller I got called selector

<g:select name="city" from="${cities}" optionValue="city" optionKey="id" noSelection="['null': 'Please choose city']"/>

This is where you would add another onChange like above and repeat the process for your next item

SelectorController:

def findCities() { 
            def s=params.id
            String domclass1= (s.substring(0,1).toUpperCase())
            String domclass2=s.substring(1,s.length())
            String domclass=domclass1+domclass2.toLowerCase()
            Class domainClass = grailsApplication?.domainClasses.find { it.clazz.simpleName ==domclass+'Cities' }?.clazz
            def cities=loadCities(domainClass)
            render(template: 'cities', model:  [cities: cities])
        }
@Cacheable("RADPOST-CITY")
        def loadCities(def domainClass) {
            if (domainClass) {
            def cities=domainClass?.findAll()
            return cities
            }
        }

Which finally puts the results together and returns it to cities template

I have called domainClass etc cos I am using it from within another plugin so you could replace all of that do provstate?.findAll() and so forth.

The speed difference I believe is down to how the ajaxdependancyselection plugin captures each item and using javascript to recreate the options element within the select drop down.

Ohh by the way it is passing the iso which it then adds to domclass+'Cities' cities and creates AoCities or AuCities and so forth so that do watch out for it and amend according to you actual domainClass or as mentioned remove all the searching for the class and just call it directly