[AJAX] - Problema no remoteFunction
25/08/2010 00:00
0
Pessoal,

Estou com um problema no remoteFunction. A idéia é tenho 3 selects, o primeiro select é o único que é exibido na página assim que ele abre, os outros estão ocultos.

A idéia é que ao selecionar algo no primeiro select, via Ajax, carregar os outros selects dinamicamente e exibí-los com o JQuery, dando um efeito.

Estou seguindo o tutorial conforme na página a seguir, mas adaptando às minhas necessidades: <!-- m --><a class="postlink" href="http://www.grails.org/AJAX-Driven+SELECTs+in+GSP">http://www.grails.org/AJAX-Driven+SELECTs+in+GSP</a><!-- m -->

A página web é:



<%@ page import=&quot;carteiro_veloz.ContatosLista&quot; %>
<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
<meta name=&quot;layout&quot; content=&quot;main&quot; />
<g&#58;set var=&quot;entityName&quot; value=&quot;${message(code&#58; 'contatosLista.label', default&#58; 'ContatosLista')}&quot; />
<title><g&#58;message code=&quot;default.create.label&quot; args=&quot;[entityName]&quot; /></title>
</head>
<body>
<div class=&quot;nav&quot;>
<span class=&quot;menuButton&quot;><a class=&quot;home&quot; href=&quot;${createLink(uri&#58; '/')}&quot;><g&#58;message code=&quot;default.home.label&quot;/></a></span>
<span class=&quot;menuButton&quot;><g&#58;link class=&quot;list&quot; action=&quot;list&quot;><g&#58;message code=&quot;default.list.label&quot; args=&quot;[entityName]&quot; /></g&#58;link></span>
</div>
<div class=&quot;body&quot;>
<h1><g&#58;message code=&quot;default.create.label&quot; args=&quot;[entityName]&quot; /></h1>
<g&#58;if test=&quot;${flash.message}&quot;>
<div class=&quot;message&quot;>${flash.message}</div>
</g&#58;if>
<g&#58;hasErrors bean=&quot;${contatosListaInstance}&quot;>
<div class=&quot;errors&quot;>
<g&#58;renderErrors bean=&quot;${contatosListaInstance}&quot; as=&quot;list&quot; />
</div>
</g&#58;hasErrors>
<g&#58;form action=&quot;save&quot; method=&quot;post&quot; >
<div class=&quot;dialog&quot;>
<table>
<tbody>

<tr class=&quot;prop&quot;>
<td valign=&quot;top&quot; class=&quot;name&quot;>
<label for=&quot;usuario&quot;><g&#58;message code=&quot;usuario.label&quot; default=&quot;Usuario&quot; /></label>
</td>
<td valign=&quot;top&quot; class=&quot;value &quot;>
<g&#58;select id=&quot;usuario&quot; name=&quot;usuario.id&quot; from=&quot;${carteiro_veloz.Usuario.findAll(ativo&#58;true)}&quot; optionKey=&quot;id&quot;
onChange=&quot;${remoteFunction(
controller&#58;'usuario',
action&#58;'ajaxGetContatos',
params&#58;'\'id=\' + escape(this.value)',
onComplete&#58;&quot;updateContatos(e)&quot;)}&quot; />
</td>
</tr>

<tr class=&quot;prop&quot; style=&quot;display&#58;none&quot; >
<td valign=&quot;top&quot; class=&quot;name&quot;>
<label for=&quot;contato&quot;><g&#58;message code=&quot;contatosLista.contato.label&quot; default=&quot;Contato&quot; /></label>
</td>
<td valign=&quot;top&quot; class=&quot;value ${hasErrors(bean&#58; contatosListaInstance, field&#58; 'contato', 'errors')}&quot;>
<g&#58;select name=&quot;contato.id&quot; from=&quot;${carteiro_veloz.Contato.list()}&quot; optionKey=&quot;id&quot; value=&quot;${contatosListaInstance?.contato?.id}&quot; />
</td>
</tr>

<tr class=&quot;prop&quot; style=&quot;display&#58;none&quot;>
<td valign=&quot;top&quot; class=&quot;name&quot;>
<label for=&quot;lista&quot;><g&#58;message code=&quot;contatosLista.lista.label&quot; default=&quot;Lista&quot; /></label>
</td>
<td valign=&quot;top&quot; class=&quot;value ${hasErrors(bean&#58; contatosListaInstance, field&#58; 'lista', 'errors')}&quot;>
<g&#58;select name=&quot;lista.id&quot; from=&quot;${carteiro_veloz.ListaContatos.list()}&quot; optionKey=&quot;id&quot; value=&quot;${contatosListaInstance?.lista?.id}&quot; />
</td>
</tr>

<tr class=&quot;prop&quot; style=&quot;display&#58;none&quot;>
<td valign=&quot;top&quot; class=&quot;name&quot;>
<label for=&quot;ativo&quot;><g&#58;message code=&quot;contatosLista.ativo.label&quot; default=&quot;Ativo&quot; /></label>
</td>
<td valign=&quot;top&quot; class=&quot;value ${hasErrors(bean&#58; contatosListaInstance, field&#58; 'ativo', 'errors')}&quot;>
<g&#58;checkBox name=&quot;ativo&quot; value=&quot;${contatosListaInstance?.ativo}&quot; />
</td>
</tr>

</tbody>
</table>
</div>
<div class=&quot;buttons&quot;>
<span class=&quot;button&quot;><g&#58;submitButton name=&quot;create&quot; class=&quot;save&quot; value=&quot;${message(code&#58; 'default.button.create.label', default&#58; 'Create')}&quot; /></span>
</div>
</g&#58;form>
</div>

<g&#58;javascript>

function updateContatos(e){

alert(&quot;entrou no update&quot;)
var contatos = eval(&quot;(&quot; + e.responseText + &quot;)&quot;) // evaluate JSON

if (contatos) {
var rselect = document.getElementById('contato.id')

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

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

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

$(&quot;.prop&quot;).fadeIn(&quot;slow&quot;)
}
}

var zselect = document.getElementById('usuario')
var zopt = zselect.options[zselect.selectedIndex]
${remoteFunction(controller&#58;&quot;usuario&quot;, action&#58;&quot;ajaxGetContatos&quot;, params&#58;&quot;'id=' + zopt.value&quot;, onComplete&#58;&quot;updateContatos(e)&quot;)}
</g&#58;javascript>
</body>
</html>


A função remota no UsuarioController.groovy é:

def ajaxGetContatos = {
println &quot;entrou aqui ajax&quot;
println params.id
def usuario = Usuario.get(params.id)

if(usuario){
println &quot;achou usuario&quot; + usuario
}
render usuario?.contatos as JSON
}


Os erros:

1) Assim que carrega o Firebug mostra um erro de que o parametro &quot;e&quot; não está definido na linha: ${remoteFunction(controller:&quot;usuario&quot;, action:&quot;ajaxGetContatos&quot;, params:&quot;'id=' + zopt.value&quot;, onComplete:&quot;updateContatos(e)&quot;)}, que se localiza no fim do código javascript.
2) Ao executar a seleção do campo, a função updateContatos(e), não é executada por algum motivo. Ele consegue executar a função ajaxGetContatos, mas não consegue executar a função no onComplete, por algum motivo.

Estou achando estranho, porque a função está bem definida, como vocês podem ver. Alguém pode me dar uma luz?

Abraços!
Tags: Grails


0
Guilherme, tudo bom?

Já conseguiu resolver esse problema?

Abraço!
13/09/2010 00:00


0
Senhores,

Tive esse mesmo problema hoje, estou fazendo meu primeiro projeto em grails e fui utilizar o exemplo que encontramos na documentação.

A solução pra mim foi colocar ponto e virgula no final de todas as linhas do javascript. Por receber a função pronta, feita por gente experiente, a gente acha que o problema não está ali.

Estou tendo problemas com coisas extremamente simples com o grails, não sou um programador experiente para enxergar facilmente a origem deles, e estou perdendo muito tempo, horas, com coisas que resolveria em minutos com java.

A experiência está sendo traumática, pois a documentação é sempre desatualizada. Tive erros que solucionei no chute, depois de mais de 15 horas seguindo tutorias e livros que não resolveram, estou meio ressabiado com esse framework.

Não recomendo fazer sua primeira aplicação para quem tem prazo, que é meu caso, preciso entregar um trabalho da faculdade.

Se eu tivesse feito com java + struts, que eu utilizo no meu estágio, tava pronto.
08/11/2010 00:00


0
eduardoribeiro,

qual problema voce está tendo com grails ? Poste no forum para q possamos ajudar

abçs
15/11/2010 00:00



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto