PDA

View Full Version : Chained dropdown ajax problem



grailsgk
23-09-2012, 04:04 AM
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:


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:


package cc

class CityController {
def scaffold = cc.City
//def index() { }
}

/************************************************** ***********/

cntDrop.gsp:


<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)'
&nbsp;)}"
/>
</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>
/************************************************** ***********/

myjs.js file:


//<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>

Thanks
grailsgk

grailsgk
02-10-2012, 12:40 AM
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:


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:


package cc

class CityController {
def scaffold = cc.City
//def index() { }
}

/************************************************** ***********/

cntDrop.gsp:


<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)'
&nbsp;)}"
/>
</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>
/************************************************** ***********/

myjs.js file:


//<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>

Thanks
grailsgk

This is the way it worked for me.
Thanks
grailsgk

package cc

import grails.converters.*
class CountryController {
def scaffold = cc.Country



def cntJqDrop = {

[countryList: Country.list(params)]
//redirect action:ajaxGetCityJqJSON
}

def ajaxGetCityJqJSON = {
def country = Country.findAllById(params.id)
render country?.cities as JSON
}




}


--------------------------------------------------------
cntJqDrop.gsp file

<!DOCTYPE html>
<html>
<head>

<g:javascript library="jquery" />
<r:layoutResources/>
<g:javascript src="dropdownCtry.js" />

</head>
<body>

<g:select
name="cntName"
id="country"
from="${countryList}"
noSelection="['':'Choose country']"
optionKey="id"
optionValue="name"
value="${country?.id}"

/>
</br>


<select id="city">

</select>


</body>
</html>
---------------------------------------------------------------

dropDownCtry.js

$(document).ready(function() {


$("#country").change(function() {
dataType: 'json',
$.ajax({

url: "/CountryCity/Country/ajaxGetCityJqJSON",

cache: false,
data: {id: $('#country').val()},



success: function(d) {

displayjaxval(d);

},

complete: function() {

alert("complete " );
}

});

});

});


function displayjaxval(cities) {

if (cities){

var rselect = document.getElementById('city');
var l = rselect.length;

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

}
for (var j=0; j < cities.length; j++) {

for (var i=0; i < cities[j].length; i++) {

var city = cities[j][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
}
}
}
}

}


----------------------------------------