G
grailsgk
Guest
Hi,
Has any one been able to make http://grails.org/AJAX-Driven+SELECTs+in+GSP Country City dropDown to work for grails 2.0.3?
I have added a submit button because , I could not make the ajax work . When I click the submit button, the City
drop down get populated depending on the country dropdown.
What do I need to do to make the ajax work without a submit button?
CountryController:
CityController:
cntDrop.gsp:
myjs.js file:
Thanks
grailsgk
Has any one been able to make http://grails.org/AJAX-Driven+SELECTs+in+GSP Country City dropDown to work for grails 2.0.3?
I have added a submit button because , I could not make the ajax work . When I click the submit button, the City
drop down get populated depending on the country dropdown.
What do I need to do to make the ajax work without a submit button?
CountryController:
Code:
package cc
import grails.converters.*
class CountryController {
def scaffold = cc.Country
def cntDrop = {
[countryList: Country.list(params)]
}
def ajaxGetCities = {
def country = Country.get(params.cntName)
//render(template: 'countrySelection', model: [r:country])
render(view: 'cntDrop', model: [c:country?.cities])
//render country?.cities as JSON
//render"my ${params?.cntName} ' ' ${country?.name} country"
}
}
/*************************************************************/
CityController:
Code:
package cc
class CityController {
def scaffold = cc.City
//def index() { }
}
/*************************************************************/
Code:
<html>
<head>
<g:javascript src="myjs.js" />
<g:javascript library="jquery" />
<r:layoutResources/>
</head>
<body>
<g:form method="post" >
<g:select
name="cntName"
from="${cc.Country.list()}"
noSelection="['':'Choose country']"
optionKey="id"
optionValue="name"
value="${country?.id}"
onchange="${remoteFunction(
controller:'Country',
action:'ajaxGetCities',
params:'\'country.id=\' + escape(this.value)',
onSuccess: 'updateCity(e)'
)}"
/>
</br>
</br>
<fieldset class="buttons">
<g:actionSubmit class="save" action="ajaxGetCities" value="${message(code: 'default.button.cnt.label', default: 'drop')}" />
</fieldset>
</br>
</br>
<g:select name="city"
from="${c}"
optionKey="id"
id="city.name"/>
</g:form>
</body>
</html>
/*************************************************************/
Code:
//<g:javascript>
function updateCity(e) {
// The response comes back as a bunch-o-JSON
var cities = eval("(" + e.responseText + ")") // evaluate JSON
if (cities) {
var rselect = document.getElementById('city') // 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 city = cities[i]
var opt = document.createElement('option');
opt.text = city.name
opt.value = city.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('country.name')
var zopt = zselect.options[zselect.selectedIndex]
${remoteFunction(controller:"country", action:"ajaxGetCities", params:"'id=' + zopt.value", onComplete:"updateCity(e)")}
//</g:javascript>
grailsgk
Last edited by a moderator: