Grails Brasil

Estava dando uma olhada nesse exemplo e tbm estou com um problema com ele

não sei pq o onchange nao encaminha para a action

fiz o seguinte ... tem algum passo errado? eu nao sei muito de javascript

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

na mesma pagina .gsp
antes de </head>

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

e no controller CountryController tenho a action:

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

dai altero o valor no g:select e nada acontece
coloquei o println na action e nao esta passando por la

07/12/2011 06:31

Tenta faz o import da classe de dominio Country no começo do seu gsp.

07/12/2011 11:26

castiel

(331)

Da pra instanciar ou fazer import dentro de gsp??

07/12/2011 13:20

Ae, deu certo castiel... Importei:

<%@ page import="testeajax.Country" %>

e agora funcionou...

Obrigado por mais uma ajuda :)

07/12/2011 13:51

nao esta dando certo comigo

testei aqui , a action é chamada

porem a funcao do javascript nao funciona

nao sei se coloquei no lugar certo...

antes de </head> coloquei:

<g:javascript library="prototype" />
function updateCity(e) {
		//conteudo
	}
</g:javascript>

ta certo?

07/12/2011 15:54

Para colocar códigos javascript em um gsp use:


<script type="text/javascript">
 // seu código aqui.
</script>

A tag "g:javascript" serve apenas para importar um arquivo ou diretório JS que esteja
dentro do diretório: "web-app/js"

07/12/2011 16:06

castiel

(331)

Castiel, este mesmo exemplo pode ser adaptado mesmo utilizando o Mysql? Estou tentando adaptar pra minha aplicação mas não estou conseguindo... preciso encaixar isso em um create...

07/12/2011 16:21

Sim esse exemplo serve para qualquer banco que seja possível configurar no Java.
O que não está dando certo no exemplo acima na sua aplicação?

07/12/2011 17:10

castiel

(331)

tbm estou tentando adaptar para usar na minha app tbm e nao esta funcionando

coloquei um println na action ajaxGetCities para ver se ela estava sendo chamada
quando eu altero o valor do g:select do paises o println sai
porem nada aparece no g:select das cidades

alem disso, pelo q entendi esse fimzinho de codigo faz carregar as cidades no g:select quando a pagina eh carregada

// 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)")}

na hora q eu carrego a pagina
nao sai o println que tem na action ajaxGetCities

=[

07/12/2011 18:04

Ja consegui Castiel, obrigado... O problema era que eu criei a classe de dominio chamada, por exemplo, "QualquerCoisa", e ao referenciar no onchange do combobox eu tava chamando o controlador dela como "qualquercoisa", tudo minúsculo, quando na verdade deveria chamar assim: "qualquerCoisa".
Enfim, ainda não me acostumei com isso, erro de principiante mesmo...
Só mais uma dúvida, o arquivo javascript pode ser transferido para a pasta js da aplicação e apenas adicioná-la ao cabeçalho do gsp que funciona do mesmo jeito?

07/12/2011 18:04

MHLS, os países estão aparecendo normalmente, porém as cidades não estão aparecendo no combox, é esse o seu problema?

07/12/2011 18:07

isso

com os paises tudo ok pq vem do banco

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

o outro g:select é q nao funciona, pois nao carrega
apesar de chamar a action ajaxGetCities quando mudo o valor do g:select
mas nao chama a action quando atualiza a pagina (o que deveria, por causa do fim do <script>)

<g:select name="discipline" id="discipline"></g:select>

07/12/2011 18:23

Você alterou o javascript para se adaptar ao seu <g:select>???

07/12/2011 18:34

sim... mudei onde tinha

document.getElementById('meuItem')

07/12/2011 18:39

Olha só:


<%@ 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>

Compara, e v se consegue achar o erro... Infelizmente, também sou iniciante por aqui.
Só pra prevenir, no lugar de 'meuItem' vc colocou o id do seu <g:select né? no seu caso ai, 'discipline' certo?

07/12/2011 18:45

é .. isso mesmo!
coloquei os ids dos g:select's

vc ja viu se funciona essa parte?
carregar as cidades assim q carrega a pagina

// 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)")}

pq isso tbm nao ta funcionando
ou seja... minha funcao updateCity(e)
nao funciona

esse 'e' vem de onde?

07/12/2011 18:49

cara, ta funcionando aqui... a única coisa que tava dando errado era porque não tinha dado o import, assim, ele não tava reconhecendo a classe Country, como ja citei nesse post e fui ajudado pelo castiel... Porém, o resto ta tudo igual ao do site.

07/12/2011 18:54

para voce ... funciona essa parte de carregar as cidades assim q carrega a pagina
??

07/12/2011 18:57

Não não... só dps que modifico o combobox... Se achar a solução pra isso posta aqui beleza?

07/12/2011 18:59

criei um novo projeto com o exemplo do link
exatamente igual
criei algumas instancias de country e city
modifico o valor do g:select
e de novo nao funciona

07/12/2011 19:36

Tenso... Ja testei um monte de coisa aqui, e nenhuma deu certo.

07/12/2011 19:45

Essa funcao utilizando prototype eh muito delicada... alem de deixar o gsp com muito codigo e dificil manutencao, no caso de vc ter varios selects com ajax na pagina.
Resolvi o mesmo problema q vcs estao passando utilizando jquery e a funcao getJSON. Postei isso aqui no forum dia desses. O nome do topico eh: Select com Ajax.
Qualuer duvida q vcs tenham sera um prazer ajudar.
abracos.

09/12/2011 03:08

CarlosG

(183)

A questão de deixar o gsp com muito código é só remover para a pasta js da aplicação e posteriormente só adicionar o arquivo ao cabeçalho com o <g:javascript>... Porém, vou dar uma olhada no seu post... Obrigado, qualquer coisa lhe procuro...

09/12/2011 13:25