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