formRemote não atualiza
30/01/2013 13:16
0
Oi pessoal,
não tenho muita experiencia com ajax nem com grails.

Estou usando um formRemote com input do tipo hidden e ele não atualiza. Onde foi que errei?
 
<g:formRemote name="myForm2" update="updateMe" method="GET"
action="${createLink(controller: 'documento', action: 'reduzTexto')}"
url="[controller: 'documento', action: 'reduzTexto']">
<input name="id" type="hidden" value="${doc.texto}" />
</g:formRemote>

<div id="updateMe"> ${params.id} </div>
Tags: formRemote


0
Oi Fabiano,

verifique se não está ocorrendo um erro no seu controlador.
Normalmente quando isto ocorre a saída não é renderizada a partir do Grails 2.0

Aliás, você tem como postar a action equivalente pra gente dar uma olhada caso isto não resolva?


0
to usando grails 1.3.7

A action é essa:


def reduzTexto = {

String texto = params.id
String busca = params.q

busca = busca.toLowerCase()
def tamanhoBusca = busca.length()
def localIndice = texto.toLowerCase().indexOf(busca)
int Indiceaux = 0
int letrasDepois = 0
if (localIndice > 50){
Indiceaux = localIndice - 50
}else
if (localIndice > 20){
Indiceaux = localIndice - 20
}
else
Indiceaux = 0

if ((texto.length() - localIndice)>300)
letrasDepois = 300
else
letrasDepois = texto.lenght()
String resultado = texto.substring(Indiceaux,(localIndice+tamanhoBusca+letrasDepois))
Indiceaux = resultado.indexOf(" ")
resultado = resultado.substring(Indiceaux,resultado.length())
params.id = resultado.replaceAll("(?i)"+busca, "<b>"+busca+"</b>")
}



Eu coloquei um print no começo da action e ele não chama ela realmente.
30/01/2013 15:07


0
Tá meio gambiarra... mas to fazendo testes até ganhar fluência em grails
30/01/2013 15:08


0
É impressão minha ou não tem um botão de submissão no forumlário? Penso que deve haver um, mesmo que invisível ("display:none").


0
é vdd não tem. Mas como uso um botão invisível? sou amador ainda rsrs
30/01/2013 15:12


0
Ah e o o lance do

<div id="updateMe"> ${params.id} </div>


Não é assim. O ajax (nem em Grails e nem em nenhum outro framework Action based) não vai atualizar o que já está na div "alvo". Quando você informa qual elemento é o "alvo", você diz onde o resultado será renderizado, ou seja, seu corpo será totalmente refeito.

Nesse caso, sua última linha do controller não deveria ser
params.id = resultado.replaceAll("(?i)"+busca, "<b>"+busca+"</b>")

e sim
render resultado.replaceAll("(?i)"+busca, "<b>"+busca+"</b>")

E dentro da dua <div id="updateMe"> não deve ter absolutamente nada.


0
Estude CSS. Vai lhe ser útil em qualquer tecnologia de desenvolvimento Web ;)
<input type="submit" style="display:none"/>

Isso de preferência logo antes de fechar a tag de formulário.


0
Oi Yoshiriro,

eu fiz as mudanças que vc me sugeriu na view:


<g:formRemote name="myForm2" update="updateMe" method="GET"
action="${createLink(controller: 'documento', action: 'reduzTexto')}"
url="[controller: 'documento', action: 'reduzTexto']">
<input name="s" type="hidden" value="${doc.texto}" />
<input type="submit" style="display:none"/>
</g:formRemote>
<div id="updateMe"> </div>


E no controller:

def reduzTexto = {

print "olá grails"

String texto = params.s
String busca = params.q

busca = busca.toLowerCase()
def tamanhoBusca = busca.length()
def localIndice = texto.toLowerCase().indexOf(busca)
int Indiceaux = 0
int letrasDepois = 0

if (localIndice > 50){
Indiceaux = localIndice - 50
}else
if (localIndice > 20){
Indiceaux = localIndice - 20
}
else
Indiceaux = 0

if ((texto.length() - localIndice)>300)
letrasDepois = 300
else
letrasDepois = texto.lenght()

String resultado = texto.substring(Indiceaux,(localIndice+tamanhoBusca+letrasDepois))

Indiceaux = resultado.indexOf(" ")

resultado = resultado.substring(Indiceaux,resultado.length())

render resultado.replaceAll("(?i)"+busca, "<b>"+busca+"</b>")

}

E tenho impressão que minha view ainda não chama meu controller, pois não imprime "olá grails"

30/01/2013 15:25


0
Você habilitou o Jquery no teu GSP?


0
ainda não. Como é a maneira correta de fazer isso?

assim:

<g:javascript library="jquery/jquery"/>
30/01/2013 15:32


0
Manda o código completo do teu GSP, pode ser?


0
oks,

Não repare, eu estou aprendendo ainda.

lá vai:


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Busca</title>

<style type="text/css">
* {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
}

body {
font-size: 0.9em;
padding: .5em;
}

#header form input {
padding: .1em;
}

#header .hint {
color: gray;
}

#header h1 a {
text-decoration: none;
font-family: Georgia, serif;
color: dimgray;
}

#header h1 {
letter-spacing: -0.1em;
float: left;
}

#header h1 span {
font-family: Georgia, serif;
color: #424242;
}

#header form {
margin-left: 22em;
padding-top: .1em;
}

.title {
margin: 1em 0;
padding: .3em .5em;
text-align: right;
background-color: seashell;
border-top: 1px solid lightblue;
}

.result {
margin-bottom: 1em;
}

.result .displayLink {
color: green;
}

.result .name {
font-size: larger;
}

.paging a.step {
padding: 0 .3em;
}

.paging span.currentStep {
font-weight: bold;
}

ul {
margin: 1em 2em;
}

li, p {
margin-bottom: 1em;
}
</style>
<script type="text/javascript">
var focusQueryInput = function() {
document.getElementById("q").focus();
}
</script>

</head>
<body onload="focusQueryInput();">
<div id="header">
<h1><a href="/Gerdoc/" target="_blank">Busca documentos</a></h1>

<g:formRemote name="myForm" update="up" method="GET"
action="${createLink(controller: 'documento', action: 'busca')}"
url="[controller: 'documento', action: 'busca']">
<input type="text" name="q" value="" size="50" id="q" />
<input type="submit" value="Busca" />
<input type="hidden" name="textoAux" value=${buscaDoc()}>
</g:formRemote>

<div style="clear: both; display: none;" class="hint"> See <a href="/Gerdoc/">Lucene query syntax</a> for advanced queries</div>
</div>

<div id="main">
<g:set var="qtd" value="${0}" />
<div class="title">
<span>

Exibindo <strong>1</strong> - <strong>${qtd}</strong> de <strong>${qtd}</strong>
resultados para <strong>${params.q}</strong>

</span>

</div>

<div class="results">

<div class="result">

<g:each var="doc" in="${buscaDoc()}">

<div class="name">

<g:link controller="documento" action="show" id="${doc.id}"> ${doc.tipo}</g:link>

</div>

<div class="displayLink">${doc.path}

<g:link controller="documento" action="readFromFile" params="[p:doc.path]"
target="_blank">Arquivo</g:link>
</div>

//parte que não funciona
<g:formRemote name="myForm2" update="updateMe" method="GET"
action="${createLink(controller: 'documento', action: 'reduzTexto')}"
url="[controller: 'documento', action: 'reduzTexto']">
<input name="s" type="hidden" value="${doc.texto}" />
<input type="submit" style="display:none"/>
</g:formRemote>

<div id="updateMe"> </div>

&nbsp;

<g:set var="qtd" value="${qtd + 1}"/>

</g:each>
<g:if test="${(qtd < 1) && (params.q)}">
A sua pesquisa - <b> ${params.q} </b> - não encontrou nenhum documento.
<br>
<br>
Sugestões: <br>
<g:each var="sug" in="${searchLucene()}">
<g:link controller="documento" action="busca" params="[q:sug]" >${sug} </g:link> <br>
</g:each>
</g:if>

</div>

</div>

<div>
<div class="paging">

Page:

<span class="currentStep">1</span>

</div>
</div>

</div>

</body>
</html>


O objetivo daquele trecho de código é reduzir o texto exibido pela consulta
30/01/2013 15:43


0
Hum.... bem, já que está usando Jquer 1.3.7... qual plugin está usando? O "Jquery plugin" ou o "prototype" mesmo? Porque nessa versão do Grails o padrão é o 2º.


0
Errata... quiz dizer "Grails 1.3.7" e não "Jquery 1.3.7"

Se não instalou o jquery plugin, então o javscript ajax padrão é o prototype.
Nesse caso, basta por em qualquer lugar dentro de sua <head> isso:
<g:javascript library="prototype" />


0
Tenso

quando eu coloco

<g:javascript library="prototype" />


Então eu instalei o jquery plugin
e troquei para:

<g:javascript library='jquery' />

A luta continua kkkk
30/01/2013 16:12


0
quando eu coloco

<g:javascript library="prototype" />

ele trava o submit
30/01/2013 16:12


0
Calma... vamos já... deve ser detalhe.

Para ajudar, acesse essa pagina pelo teu navegador e pede pra ver o "código-fonte" gerado. Dai posta o resultado aqui.


0
Oks

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Busca</title>

<script type="text/javascript" src="/Gerdoc/js/jquery/jquery-1.7.1.js"></script>


<style type="text/css">
* {
font-family: Arial, sans-serif;
padding: 0;
margin: 0;
}

body {
font-size: 0.9em;
padding: .5em;
}

#header form input {
padding: .1em;
}

#header .hint {
color: gray;
}

#header h1 a {
text-decoration: none;
font-family: Georgia, serif;
color: dimgray;
}

#header h1 {
letter-spacing: -0.1em;
float: left;
}

#header h1 span {
font-family: Georgia, serif;
color: #424242;
}

#header form {
margin-left: 22em;
padding-top: .1em;
}

.title {
margin: 1em 0;
padding: .3em .5em;
text-align: right;
background-color: seashell;
border-top: 1px solid lightblue;
}

.result {
margin-bottom: 1em;
}

.result .displayLink {
color: green;
}

.result .name {
font-size: larger;
}

.paging a.step {
padding: 0 .3em;
}

.paging span.currentStep {
font-weight: bold;
}

ul {
margin: 1em 2em;
}

li, p {
margin-bottom: 1em;
}
</style>
<script type="text/javascript">
var focusQueryInput = function() {
document.getElementById("q").focus();
}
</script>

</head>
<body onload="focusQueryInput();">
<div id="header">
<h1><a href="/Gerdoc/" target="_blank">Busca documentos</a></h1>


<form onsubmit="jQuery.ajax({type:'GET',data:jQuery(this).serialize(), url:'/Gerdoc/documento/busca',success:function(data,textStatus){jQuery('#up').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false" method="POST" action="/Gerdoc/documento/busca" name="myForm" id="myForm">
<input type="text" name="q" value="" size="50" id="q" />
<input type="submit" value="Busca" />
<input type="hidden" name="textoAux" value=[gerdoc.Documento : 3316]>
</form>

<div style="clear: both; display: none;" class="hint"> See <a href="/Gerdoc/">Lucene query syntax</a> for advanced queries</div>
</div>

<div id="main">

<div class="title">
<span>

Exibindo <strong>1</strong> - <strong>0</strong> de <strong>0</strong>
resultados para <strong>fabiana</strong>

</span>

</div>

<div class="results">

<div class="result">



<div class="name">

<a href="/Gerdoc/documento/show/3316"> PROTESTO</a>

</div>

<div class="displayLink">documentos/PROTESTO/AP/AP017/AP017 - 085

<a href="/Gerdoc/documento/readFromFile?p=documentos%2FPROTESTO%2FAP%2FAP017%2FAP017+-+085" target="_blank">Arquivo</a>
</div>


<form onsubmit="jQuery.ajax({type:'GET',data:jQuery(this).serialize(), url:'/Gerdoc/documento/reduzTexto',success:function(data,textStatus){jQuery('#updateMe').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){}});return false" method="POST" action="/Gerdoc/documento/reduzTexto" name="myForm2" id="myForm2">
<input name="s" type="hidden" value="TEXTO GIGANTE DO DOCUMENTO" />
<input type="submit" style="display:none"/>
</form>

<div id="updateMe"> </div>

&nbsp;

</div>

</div>

<div>
<div class="paging">

Page:

<span class="currentStep">1</span>

</div>
</div>

</div>

</body>
</html>
30/01/2013 16:42


0
Amigo, tem algo de errado com teu
 <input name="id" type="hidden" value="${doc.texto}" />

visto que o HTML gerado foi
 <input type="hidden" name="textoAux" value=[gerdoc.Documento : 3316]>


Bem, fora isso, que com certeza vai gerar erro no teu controller, teria que ver o que acontece quando voce manda submeter o formulário. Sabe usar algum analisador de requisição? Tem o nativo do Chrome e do IE e o Firebug (dentre outrs tantos) no Firefox.

Se usar esse tipo de ferramenta, sabe o que o Ajax tentou fazer ou se ao menos oi acionado.


0
Errata:
onde eu coloquei
 <input name="id" type="hidden" value="${doc.texto}" />

leia-se
 <input type="hidden" name="textoAux" value=${buscaDoc()}>



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