JQuery + Ajax - JQuery não é processado

Rafael_Guerreiro · Maio 27, 2013, 2:57pm

Você pode escolher uma das seguintes formas:

Usar um atributo já pronto, por exemplo o HREF.
Criar um atributo, mas existe uma regra, todo atributo criado por você deve começar com “data-”.

Eu gosto mais de criar um atributo…

Como eu faria:

&lt;a href="#" class="rascunho" data-id="&lt;%=da.getId()%&gt;"&gt;&lt;%=da.getTitle()%&gt;&lt;/a&gt;

E para pegar esse valor:

var idrascunho = $(this).attr('data-id');

É interessante deixar a function de click mais ou menos assim:

function (event) {
// ... Faz as coisas!

   event.stopPropagation(); // Pára a propagação do click.
   event.preventDefault(); // Pára o evento de click. Ou seja, não vai tentar ir para a url definida.
   return false; // Retorna false para fazer o mesmo efeito acima.
}

LVentura · Maio 27, 2013, 11:23pm

[quote=Rafael Guerreiro]Você pode escolher uma das seguintes formas:

Usar um atributo já pronto, por exemplo o HREF.
Criar um atributo, mas existe uma regra, todo atributo criado por você deve começar com “data-”.

Eu gosto mais de criar um atributo…

Como eu faria:

&lt;a href="#" class="rascunho" data-id="&lt;%=da.getId()%&gt;"&gt;&lt;%=da.getTitle()%&gt;&lt;/a&gt;

E para pegar esse valor:

var idrascunho = $(this).attr('data-id');

É interessante deixar a function de click mais ou menos assim:

[code]
function (event) {
// … Faz as coisas!

event.stopPropagation(); // Pára a propagação do click.
event.preventDefault(); // Pára o evento de click. Ou seja, não vai tentar ir para a url definida.
return false; // Retorna false para fazer o mesmo efeito acima.
}
[/code][/quote]

Muito bom, dei uma adaptada no que você me ensinou, e consegui fazer funcionar no primeiro clique meu código ficou assim:

function loadRascunho(_idrascunho){
 
       var idrascunho = _idrascunho;
       var typeeRequest = 111; // Poe o type aqui.  
   
       $.ajax({       
          type: "post",       
          url: "ProccessRequest",       
          data: {     
             typerequest: typeeRequest,    
             idrascunho: idrascunho     
          },     
          success: function(responseText){  
             var _vector = responseText.split(";");  
             var title = _vector[0];    
             var tags = _vector[1];    
             
             //      var fastDescription=vector[2].value;    
             //      var idClassificacao=vector[3].value;    
             var text=_vector[4];    
             //      var data=vector[5].value;    
             //      var owner=vector[6].value;    
   
             // use o jquery para fazer isso aqui por você:  
             // var change_title = document.getElementById('title_article_rascunho').value = title;    
             $('#title_article_rascunho').val(title);  
             // var change_tags= document.getElementById('tag_article_rascunho').value = tags;    
             $('#tag_article_rascunho').val(tags);  
             // tinymce.triggerSave();    
             // mySimpleHtmlInserter('text_article_rascunho', text);//adiciona o html ao editor  
            mySimpleHtmlInserter('#text_article_rascunho',text);  
          }  
       });  
}


function mySimpleHtmlInserter(textAreaId, insertHtml)
{
	tinymce.activeEditor.execCommand('mceInsertContent', false, insertHtml);
}

Eu havia tentado fazer assim também:

  $(document).ready(function(){  
       $('rasc_'+$(this).attr('data-id')).on('click', function(){  
          var idrascunho = $(this).attr('data-id'); 
          var typeeRequest = 111; // Poe o type aqui.  
      
          $.ajax({       
             type: "post",       
             url: "ProccessRequest",       
             data: {     
                typerequest: typeeRequest,    
                idrascunho: idrascunho     
             },     
             success: function(responseText){  
                var _vector = responseText.split(";");  
                var title = _vector[0];    
                var tags = _vector[1];    
                var text=_vector[4];    
         
               $('#title_article_rascunho').val(title);  
              
                $('#tag_article_rascunho').val(tags);  
             
               mySimpleHtmlInserter('text_article_rascunho', text);//adiciona o html ao editor  
               
             }  
          });  
       });  
    });

mas assim ele não reconhecia a função, a JSP estava assim:

"id=“rasc_<%=da.getId()%>” data-id=“rasc_<%=da.getId()%>”

Acredito que o erro estava aqui:

e imaginei que uma forma de tentar resolver isso era ao invés de tentar aplicar este comando a um id especifico, aplicasse a todos os links, ja que a partir de agora estaria utilizando data-id para buscar no servlet o id certo, mas não consegui implementar esta idéia.

>

Rafael_Guerreiro · Maio 28, 2013, 7:30am

Sim, o problema está ai mesmo.

Isso não funcionou pois esse “this” não está dentro da function do click, então ele não tem como saber quem é.

Para resolver isso, faça usando a class como eu mostrei, é o jeito mais simples.

Pense assim, se você for fazer pelo ID, qual ID ele vai pegar? (Visto que esse código só será executado uma vez.)

Para fazer isso funcionar, você vai precisar colocar todos os IDs na mão, assim mesmo:
$(’#rasc_1’)…
$(’#rasc_2’)…
$(’#rasc_3’)…
$(’#rasc_4’)…

Pouquíssimo eficiente.

LVentura · Maio 28, 2013, 10:16am

[quote=Rafael Guerreiro]Sim, o problema está ai mesmo.

Isso não funcionou pois esse “this” não está dentro da function do click, então ele não tem como saber quem é.

Para resolver isso, faça usando a class como eu mostrei, é o jeito mais simples.

Pense assim, se você for fazer pelo ID, qual ID ele vai pegar? (Visto que esse código só será executado uma vez.)

Para fazer isso funcionar, você vai precisar colocar todos os IDs na mão, assim mesmo:
$(’#rasc_1’)…
$(’#rasc_2’)…
$(’#rasc_3’)…
$(’#rasc_4’)…

Pouquíssimo eficiente.[/quote]

Exato, da forma que eu fiz, este problema não ocorre, você acha que é uma forma ruim de executar/criar aquela função?

usando o

function loadRascunho(id_rascunho){ ... }

e chamando esta função dentro do onclick, porque ai na lista dentro do onclick eu consigo fazer a JSP criar os on clicks assim:

onclick(loadRascunho(‘rasc_’+<%=da.getId()%>)

LVentura · Maio 28, 2013, 10:25am

estou viajando completamente, pode desconsiderar minha pergunta acima, com certeza como você fez com a classe é muito mais performatico pois não preciso duplicar, triplicar e quaduplicar os eventos do onclick.

Agora eu entendi o funcionamento da classe.

tudo que tiver aquela classe vai executar aquela função, porém ele vai pegar apenas o id da classe que foi clicada a partir do data-id que criamos correto?

o “a.” serve para dizer que serão apenas as classes da tag a ?

----------------EDIT--------------

FUNCIONOU:

[code]
$(document).ready(function(){
$(‘a.rascunhow’).on(‘click’, function(){

   var idrascunho =  $(this).attr('data-id');  
   var typeeRequest = 111; // Poe o type aqui.  

   $.ajax({       
      type: "post",       
      url: "ProccessRequest",       
      data: {     
         typerequest: typeeRequest,    
         idrascunho: idrascunho     
      },     
      success: function(responseText){  
         var _vector = responseText.split(";");  
         var title = _vector[0];    
         var tags = _vector[1];    
         
         //      var fastDescription=vector[2].value;    
         //      var idClassificacao=vector[3].value;    
         var text=_vector[4];    
         //      var data=vector[5].value;    
         //      var owner=vector[6].value;    

         // use o jquery para fazer isso aqui por você:  
         // var change_title = document.getElementById('title_article_rascunho').value = title;    
         $('#title_article_rascunho').val(title);  
         // var change_tags= document.getElementById('tag_article_rascunho').value = tags;    
         $('#tag_article_rascunho').val(tags);  
         // tinymce.triggerSave();    
         // mySimpleHtmlInserter('text_article_rascunho', text);//adiciona o html ao editor  
        mySimpleHtmlInserter('#text_article_rascunho',text); 
        
      }  
   });  
});

});[/code]

Estou aprendendo mais neste tópico do que nas aulas haha!

Rafael_Guerreiro · Maio 28, 2013, 1:49pm

É exatamente a mesma coisa que os seletores CSS. Exemplo, temos a seguinte tag html:

Podemos ter os seguintes seletores CSS:

#id1 // Pega o elemento que tem esse ID
.classeMarota // Pega todos os elementos que tem essa class
div // Pega todos os elementos que são div.

// Quando colocamos um seletor GRUDADO com outro, significa que queremos os elementos que são AS DUAS COISAS.
// Exemplo
div#id1 // Pega o elemento com esse ID e que é um DIV.
div.classeMarota.outraClasse // Pega os elementos que são DIV e que tem essas duas classes

O jQuery aproveitou essa ideia para fazermos os seletores dos nossos elementos.

LVentura · Maio 31, 2013, 12:05pm

Olá amigo, precisava de uma recomendação sua.

Eu tenho artigos que serão publicados em um feed principal, esse feed vai mostrar 10 artigos de cada vez. a cada vez que meu scroll descer eu quero que sejam carregados mais 10 artigos.

A função do Scroll ja está pronta, o problema seria em como limitar a quantidade de artigos a cada carregamento.

Por exemplo:

Eu tenho os artigos

Artigo 1;
Artigo 2;
Artigo 3;
Artigo 4;
Artigo 5;
Artigo 6;
Artigo 7;
Artigo 8;
Artigo 9;
Artigo 10;

....(até o artigo 30);
Artigo 30;


a primeira vez que eu carregar a pagina, ele vai mostrar os 10 primeiros, quando eu descer o scroll ele vai mostrar os 10 primeiros junto com os proximos 10, como eu vou posso saber qual será a nova lista de artigos que será inserida, levando em consideração de que a cada 10 artigos é uma nova consulta no banco de dados. E que eu não consigo manter um atributo de contagem no HttpServletRequest para indicar qual será o número da nova lista , já que a cada nova requisição AJAX ele perde esses atributos.

Talvez eu esteja indo pelo caminho errado também!

Rafael_Guerreiro · Maio 31, 2013, 2:54pm

Faça do jeito mais simples.

Serão sempre de 10 em 10.

É só você guardar em algum lugar o valor da posição inicial de cada consulta e, quando retornar os novos artigos, você soma no número que você tinha…

± assim:

var inicial = 0;
$.ajax({
// outras options
data : {inicial : inicial}
success : function(data) {
   inicial += data.length;
}
});

Dai na hora de pegar no banco vc pega do registro de número inicial à inicial + 10…

LVentura · Maio 31, 2013, 10:47pm

[quote=Rafael Guerreiro]Faça do jeito mais simples.

Serão sempre de 10 em 10.

É só você guardar em algum lugar o valor da posição inicial de cada consulta e, quando retornar os novos artigos, você soma no número que você tinha…

± assim:

var inicial = 0;
$.ajax({
// outras options
data : {inicial : inicial}
success : function(data) {
   inicial += data.length;
}
});

Dai na hora de pegar no banco vc pega do registro de número inicial à inicial + 10…[/quote]

Entãoo, eu tentei fazer isso com attribute na JSP, sempre que ele carregava os novos registros ele sumia com esses atributos, é como se ele destruisse ecriasse novamente os objetos request response, não vai acontecer da mesma forma assim?

Eu tentei guardar esses dados na session, porém quando o usuário atualiza a página é como se ele também somasse esse valor, muito estranho.

vou tentar fazer como você disse, espero que funcione, obrigado!!!

[edit…]

eu lembrei de um probleminha que está ocorrendo com a minha função de scroll, se eu quiser o scroll vai descendo infinitamente mesmo sem ter conteudo,

o código é o seguinte:

[code]
$(window).scroll(function() {

if($(this).scrollTop() + $(this).height() == $(document).height()) { 
	abrirPag("modelArtigo.jsp", 0);
}

}); [/code]

Não entendi muito bem o que essa função faz, mas acho que teria que ter um limite nesse IF, já que se ele for igualando o height atual com o tamanho do documento os dois na minha idéia vao estar sempre iguais, então vai descer eternamente, acredito que teria que fazer uma função pra quando chegar no limite de páginas, tipo limite de artigos, ele não descer mais, seria isso?

aproveitando o tópico para colocar outra duvida que tenho, eu posso retornar um objeto aqui?

success : function(data) { inicial += data.length; }

se sim, como faço para acessar os atributos, é que não entendi seu data.length;

Obrigaado!!

LVentura · Junho 4, 2013, 9:56pm

Cara consegui fazer certinho tudo que eu queria, implementar as funcionalidades que você me ensinou, só que a função de descer o scroll e atualizar parou de funcionar, segue o script da função:

$(’#feedArtigos’).scroll(function() {
alert(‘final’);
if($(this).scrollTop() + $(this).height() == $(document).height()) {
alert(‘final’);
addFeed();
}
});

ele nao chega em nenhum dos alerts

system · Dezembro 30, 2015, 2:27pm

JQuery + Ajax - JQuery não é processado

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI