Problema simples em ajax
06/12/2011 23:47
<form>
<g:select
optionKey="id" optionValue="name" name="country.name" id="country.name" from="${Country.list()}"
onchange="${remoteFunction(
controller:'country',
action:'ajaxGetCities',
params:'\'id=\' + escape(this.value)',
onComplete:'updateCity(e)')}"
></g:select>
<g:select name="city" id="city"></g:select>
<g:select
optionKey="id" optionValue="name" name="country.name" id="country.name" from="${Country.list()}"
onchange="${remoteFunction(
controller:'country',
action:'ajaxGetCities',
params:'\'id=\' + escape(this.value)',
onComplete:'updateCity(e)')}"
></g:select>
<g:javascript library="prototype" />
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>
def ajaxGetCities = {
def country = Country.get(params.id)
render country?.cities as JSON
}
<%@ page import="testeajax.Country" %>
<g:javascript library="prototype" />
function updateCity(e) {
//conteudo
}
</g:javascript>
<script type="text/javascript">
// seu código aqui.
</script>
// 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:select name="country.city" id="country.city"
from="${Country.list()}" optionKey="id" value="${countryInstance?.id}"
OnChange="${remoteFunction(
controller: 'country',
action:'ajaxGetCities',
params:'\'id=\' + escape(this.value)',
onComplete:'updateCity(e)')}"></g:select>
<g:select name="discipline" id="discipline"></g:select>
<%@ page import="testeajax.Country" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<g:javascript library="prototype" />
<script type="text/javascript">
function updateCity(e) {
var cities = eval("(" + e.responseText + ")")
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)
}
catch(ex) {
rselect.add(opt)
}
}
}
}
// 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)")}
</script>
</head>
<body>
<form>
<g:select
optionKey="id" optionValue="name" name="country.name" id="country" from="${Country.list()}"
onchange="${remoteFunction(
controller:'country',
action:'ajaxGetCities',
params:'\'id=\' + escape(this.value)',
onComplete:'updateCity(e)')}"
></g:select>
<g:select name="city" id="city"></g:select>
</form>
</body>
</html>
// 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)")}
Para se registrar, clique aqui.