[Grails + AJAX] Chained selection

[Karol Litwinczuk]

I work on application in witch extensivly use State ( "Województwo" , Domain class is Wojewodztwo ), County ("Powiat", Domain class of the same name ) and Gmina ( whitch is the representation of city or village, Domain class is Gmina ) objects. The relationship diagram is like this:

Wojewodztwo -> Powiat -> Gmina

All the relationships are "hasMany" and "belongsTo", respectivly, so Wojewodztwo hasMany "Powiats" and "Gminas" ( Powiatów i Gmin ), Powiat belongsTo Wojewodztwo and hasMany Gminas and Gmina belongsTo one Wojewodztwo and one Powiat. What I have problem with is working chain selction on creating new Gmina, so when I choose Wojewodztwo selection list of Powiats to whitch the Gmina should be, would be shorted only to the Powiats of this Wojewodztwo, not all of them from database. I tired about two ways of doing that - this and this, will be testing this one - and none is working for me. Could someone help me? Spend half a day on something that should be rather tirval is very demotivating...

Started with this scaffolded selction fields

<tr class="prop">
                                <td valign="top" class="name">
                                    <label for="powiat"><g:message code="gmina.powiat.label" default="Powiat" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: gminaInstance, field: 'powiat', 'errors')}">
                                    <g:select name="powiat.id" from="${wnioski.Powiat.list()}" optionKey="id" value="${gminaInstance?.powiat?.id}"  />
                                </td>
                            </tr>
                        
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="wojewodztwo"><g:message code="gmina.wojewodztwo.label" default="Wojewodztwo" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: gminaInstance, field: 'wojewodztwo', 'errors')}">
                                    <g:select name="wojewodztwo.id" from="${wnioski.Wojewodztwo.list()}" optionKey="id" value="${gminaInstance?.wojewodztwo?.id}"  />
                                </td>
                            </tr>

Second, smaller question - I thinking about using UI plugin and don't know what to choose - GrailsUI, RichUI or maybe Dojo one? Was thinking about using even GWT, but for now, need only some little components like Date Picker in form of calendar etc. Likes the design of components of GrailsUI or Dojo one, but list of elements of RichUI is also tempting.

[Gregg Bolinger]

We can't help you if you don't show us what you have done. Where is your non-scaffolding code you've written to handle the selection change events and send the ajax request and process the response?

[Karol Litwinczuk]

Gregg Bolinger wrote:We can't help you if you don't show us what you have done. Where is your non-scaffolding code you've written to handle the selection change events and send the ajax request and process the response?

They were made all on the examples, only changing the names for my app. But here is how I remade them:

Grails main tutorial:

<tr class="prop">
                                <td  class="name">
                                    <label for="wojewodztwo"><g:message code="gmina.wojewodztwo.label" default="Wojewodztwo" /></label>
                                </td>
                                <td  class="value ${hasErrors(bean: gminaInstance, field: 'wojewodztwo', 'errors')}">
                                    <g:select  optionKey="id" optionValue="nazwa" name="wojewodztwo.nazwa" id="wojewodztwo.nazwa" from="${wnioski.Wojewodztwo.list()}"
        onchange="${remoteFunction(
            controller:'wojewodztwo',
            action:'ajaxGetPowiaty',
            params:'\'id=\' + escape(this.value)',
            onComplete:'updatePowiat(e)')}"></g:select>
                                </td>

            <g:javascript>
	function updatePowiat(e) {
		// The response comes back as a bunch-o-JSON
		var powiaty = eval("(" + e.responseText + ")")	// evaluate JSON

		if (powiaty) {
			var rselect = document.getElementById('powiat')

			// Clear all previous options
			var l = rselect.length

			while (l > 0) {
				l--
				rselect.remove(l)
			}

			// Rebuild the select
			for (var i=0; i < cities.length; i++) {
				var powiat = powiaty[i]
				var opt = document.createElement('option');
				opt.text = powiat.name
				opt.value = powiat.id
			  	try {
			    	rselect.add(opt, null) // standards compliant; doesn't work in IE
			  	}
		  		catch(ex) {
		    		rselect.add(opt) // IE only
		  		}
			}
		}
	}


	// This is called when the page loads to initialize city
	var zselect = document.getElementById('wojewodztwo.nazwa')
	var zopt = zselect.options[zselect.selectedIndex]
	${remoteFunction(controller:"wojewodztwo", action:"ajaxGetPowiaty", params:"'id=' + zopt.value", onComplete:"updatePowiat(e)")}

</g:javascript>
                                    </tr>

<tr class="prop">
                                <td  class="name">
                                    <label for="powiat"><g:message code="gmina.powiat.label" default="Powiat" /></label>
                                </td>
                                <td  class="value ${hasErrors(bean: gminaInstance, field: 'powiat', 'errors')}">
                                    <g:select name="powiat" id="powiat" />
                                </td>
                            </tr>

Of course, it doesn't work. Now even list of all Powiats don't show...

I must also add that I updated to latest, Grails 1.3.3 version. Maybe there is some bug with AJAX on it?

I go to remake the others examples.

[Gregg Bolinger]

Of course, it doesn't work.

TellTheDetails

[Karol Litwinczuk]

Detailed description of problem
what you did - Code is in post before
what you expected to happen - Trying to make the DropDown list for Powiats only limited to those in belonging to chosen Wojewodztwo
why you expected it to happen - It's plain and simple offical tutorial and should work as such.
why you need it to happen - To make app easier to use and nicer looking and "slick" in use.
what actually happened instead and why what happened is a problem to you:
The one picture is more worth than 1000 words..

Before:
http://img153.imageshack.us/img153/628/screenshot027c.jpg
http://img15.imageshack.us/img15/217/screenshot028d.jpg
http://img291.imageshack.us/img291/2067/screenshot029jm.jpg
http://img833.imageshack.us/img833/9201/screenshot030.jpg
http://img833.imageshack.us/img833/1273/screenshot031w.jpg

After:
http://img199.imageshack.us/img199/299/screenshot032py.jpg

Error message - Non, just not working.
Version numbers of relevant libraries, JDK, tools, operating system etc. - JDK - 1.6.0._17 , Netbeans 6.9, Windows 7 64-bit, Browser = Google Chrome
Code snippets - upper and below
Stack trace - don't know who to show on Netbeans
What else you tried/what worked/what didn't work - other tutorial and didn't work.