Discussoes de Programacao e Tecnologia

JQuery + Ajax - JQuery não é processado

49 respostas
L
LVentura

Olá, estou criando uma aplicação pra um trabalho de aula em JSP, como não me contento apenas com o que o professor passa sobre JSP decidi criar a página com Ajax e JQuery, estou pesquisando bastante pela internet, e ja consegui construir algumas coisas legais.

Quando fui tentar processar um código JQuery dentro de uma página que foi carregada pelo AJAX, este código não funciona, se eu tento acessar a página diretamente sem ir pelo fluxo ( clicar no menu e tal que é onde o ajax faz a sua parte ) o código JQuery funciona, meu código está assim:

showFoto.js:
JQuery:

$(document).ready(function() {
    	$("a#imgtbg").fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
 });

Página estática:

<div class="menuLateral">
<a onclick="loadPage('gratificacoes.jsp');">Gratificações</a><br>
</div>

Página carregada pelo ajax:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="resources/css/menu.css" type="text/css">
<link rel="stylesheet" href="resources/css/topStyle.css" type="text/css" />
<link rel="stylesheet" href="resources/css/dock.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" language="javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="resources/js/showPhoto.js"></script>
</head>
<body>
<jsp:include page="tgo.jsp"></jsp:include>
</body>
</html>

Página tgo.jsp do include

head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel=stylesheet href="resources/css/menu.css" type="text/css">
<link rel="stylesheet" href="resources/css/topStyle.css" type="text/css" />
<link rel="stylesheet" href="resources/css/dock.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" language="javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="resources/js/showPhoto.js"></script>

</head>
<body>
<div id="gallery">
<a id="imgtbg" href="resources/images/tgop1.png"><img src="resources/images/tgop1.png" width="200" height="150" alt="" /></a>
</div>

Agradeço toda e qualquer ajuda.

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

49 Respostas

R
Rafael_Guerreiro

Vamos ao primeiro problema:
Nunca coloque código JS nos elementos, ou seja:

Isso é feio…
Algo mais bonito:

&lt;!-- // No HTML fica assim: --&gt;
&lt;a id="gratificacoes" &gt;Gratificações&lt;/a&gt; &lt;!--// sempre precisa colocar o href no &lt;a&gt; --&gt; 

// Arquivo .js separado
$('#gratificacoes').on('click', function(){
   loadPage('gratificacoes.jsp');
});

Agora vamos ao segundo problema… Quando você carrega com ajax, a página carregada vai fazer parte do DOM da página atual, ou seja, a página já tem o head…

Para resolver isso, essa página deveria ser colocada assim:

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" language="javascript"&gt;&lt;/script&gt;  
&lt;script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;  
&lt;script type="text/javascript" src="resources/js/showPhoto.js"&gt;&lt;/script&gt;    

&lt;div id="gallery"&gt;  
&lt;a id="imgtbg" href="resources/images/tgop1.png"&gt;&lt;img src="resources/images/tgop1.png" width="200" height="150" alt="" /&gt;&lt;/a&gt; 
&lt;/div&gt;
L
LVentura
Rafael Guerreiro:
Vamos ao primeiro problema: Nunca coloque código JS nos elementos, ou seja: 
&lt;a onclick="loadPage('gratificacoes.jsp');"&gt;Gratificações&lt;/a&gt;Gratificações&lt;/a&gt;
Isso é feio... Algo mais bonito: 
&lt;!-- // No HTML fica assim: --&gt;
&lt;a id="gratificacoes" &gt;Gratificações&lt;/a&gt; &lt;!--// sempre precisa colocar o href no &lt;a&gt; --&gt; 

// Arquivo .js separado
$('#gratificacoes').on('click', function(){
   loadPage('gratificacoes.jsp');
});

Agora vamos ao segundo problema... Quando você carrega com ajax, a página carregada vai fazer parte do DOM da página atual, ou seja, a página já tem o head...

Para resolver isso, essa página deveria ser colocada assim: 
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" language="javascript"&gt;&lt;/script&gt;  
&lt;script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;  
&lt;script type="text/javascript" src="resources/js/showPhoto.js"&gt;&lt;/script&gt;    

&lt;div id="gallery"&gt;  
&lt;a id="imgtbg" href="resources/images/tgop1.png"&gt;&lt;img src="resources/images/tgop1.png" width="200" height="150" alt="" /&gt;&lt;/a&gt; 
&lt;/div&gt;

Muito obrigado, nunca utilizei java script e não tive ninguém que me ensinasse, obrigado pelas dicas, vou tentar aqui e ja coloco uma resposta, você diz que não estava funcionando porque o head estava repetido?

Att,

L
LVentura

Olá fiz os testes aqui e não funcionou ):, provavelmente por causa das outras paginas que não deixei explicita na minha explicaçao, vou explicar melhor para talvez descobrir se há mais alguma coisa implicando neste problema.

Primeiramente tenho uma página JSP dentro da minha página principal, essa minha pagina JSP tem 4 DIVS dividdas em dock panels e dentro de cada dock deste eu carrego uma página jsp com a função include:

dock TOP:

dock MENU

dock FEED:

dock RIGHT:

dock BOTTOM

Os links do menuLateral.jsp irão via AJAX inserir um HTML na pagina feed.jsp.

Então no menuLateral tenho meus links, e clicando em um deles, eu insiro um HTML na pagina feed.jsp.

então o fluxo é:
Abrir pagina principal < carrega todos os includes >
Clica no link "Gratificacoes" no menuLateral. ao clicar no menu ele irá chamar o AJAX que passará para ele um HTML.
Este html é este:

</html>
<body>
<jsp:include page="tgo.jsp"></jsp:include>  
</body>  
</html>

Então ele gospe o html acima e insere dentro da pagina feed.jsp após clicar no menu gratificações.

a página tgo.jsp está assim:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" language="javascript"></script>    
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>    
<script type="text/javascript" src="resources/js/showPhoto.js"></script>      
  
<div id="gallery">    
<a id="imgtbg" href="resources/images/tgop1.png"><img src="resources/images/tgop1.png" width="200" height="150" alt="" /></a>   
</div>

minha estrutura de pastasestá assim:

WebContent
gratificacoes.jsp
top.jsp
tgo.jsp
feed.jsp
rodape.jsp
menuLateral.jsp
+resources
+css
- todos os css
+images
- todas as imagens
+js
-ajax.js
-instrucoes.js
-showPhoto.js
+fancybox
- todas as bibliotecas imagens e css necessários para o funcionamento do fancyboxs
+WEB-INF
+META-INF

Tirei todos os heads das paginas que estão dentro do fluxo como você me instruiu, e organizei os .js como descrito por você.

O que eu posso ter feito de errado?

Att,

R
Rafael_Guerreiro

Esse jeito de trabalhar com include de JSP é um pouco feio…

Mas, você precisa lembrar de que JSP na verdade é um HTML um pouco dinâmico… Ou seja, você tem que tratá-lo como um HTML:

&lt;!-- // CADE O &lt;head&gt; e o &lt;body&gt;???? --&gt;
&lt;html&gt;&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
dock TOP: 
&lt;jsp:include page="top.jsp"&gt;&lt;/jsp:include&gt; 
dock MENU 
&lt;jsp:include page="menuLateral.jsp"&gt;&lt;/jsp:include&gt; 
dock FEED: 
&lt;jsp:include page="feed.jsp"&gt;&lt;/jsp:include&gt; 
dock RIGHT: 
&lt;jsp:include page="menuRight.jsp"&gt;&lt;/jsp:include&gt; 
dock BOTTOM
&lt;/body&gt;
&lt;/html&gt;
L
LVentura

Rafael Guerreiro:
Esse jeito de trabalhar com include de JSP é um pouco feio…

Mas, você precisa lembrar de que JSP na verdade é um HTML um pouco dinâmico… Ou seja, você tem que tratá-lo como um HTML:

&lt;!-- // CADE O &lt;head&gt; e o &lt;body&gt;???? --&gt; &lt;html&gt;&lt;head&gt;&lt;/head&gt; &lt;body&gt; dock TOP: &lt;jsp:include page="top.jsp"&gt;&lt;/jsp:include&gt; dock MENU &lt;jsp:include page="menuLateral.jsp"&gt;&lt;/jsp:include&gt; dock FEED: &lt;jsp:include page="feed.jsp"&gt;&lt;/jsp:include&gt; dock RIGHT: &lt;jsp:include page="menuRight.jsp"&gt;&lt;/jsp:include&gt; dock BOTTOM &lt;/body&gt; &lt;/html&gt;

Imaginei que você fosse dizer isso, mas o que eu escrevi foi só uma representação OK? o código verdadeiro não está assim, só escrevi para melhor entendimento.

No momento não tenho o código para lhe enviar, mas esta correto e esta funcionando pois se não, minhas páginas AJAX não estavam funcionando o que não é o caso.

O caso mesmo é porque o JQuery não está funcionando quando a página é chamada por uma requisição AJAX

Momento vivendo e aprendendo: Qual seria o jeito bonito de se trabalhar com JSP?

R
Rafael_Guerreiro

Quando você conseguir os arquivos, coloque-os inteiros aqui, talvez alguma coisa esteja passando batido.

Quanto às boas práticas para o JSP, deve pensar nas boas práticas para se trabalhar com HTML…

Para isso, existe um post bom sobre isso:
http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/

Lógico que em desenvolvimento, não vamos comprimir os CSS e JS, pois precisam de manutenção, então, deixe isso para a implantação em produção.
Salve sempre a versão descomprimida para poder continuar a dar manutenção.

Outra coisa, cuidado com Javascript, por exemplo, quando você carrega uma página com ajax que contém um arquivo js, o jQuery vai executar esse JS quando você o colocar na página, e isso é pouco performático.
Por isso, é de boa prática você usar o ‘live’ para eventos. O ‘live’ diz o seguinte: para todos os objetos que tiverem esse seletor que estão e serão criados vão executar esse callback nesse evento.
Fica assim com jQuery:

$(document).on('click', '.clickable', function(){
      alert('Clicou!!');
});

Ou seja, todo elemento criado DENTRO de document que contém a classe ‘clickable’, vai apresentar um alert quando fizermos o click.

Lógico que isso funciona para os elementos criados dentro de uma determinada div…

A dica aqui é o seguinte: coloque os eventos no live e os carregue e execute antes. Depois, quando o Ajax for acionado, os elementos que estão lá dentro já têm o evento carregado.

L
LVentura

Rafael Guerreiro:
Quando você conseguir os arquivos, coloque-os inteiros aqui, talvez alguma coisa esteja passando batido.

Quanto às boas práticas para o JSP, deve pensar nas boas práticas para se trabalhar com HTML…

Para isso, existe um post bom sobre isso:
http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/

Lógico que em desenvolvimento, não vamos comprimir os CSS e JS, pois precisam de manutenção, então, deixe isso para a implantação em produção.
Salve sempre a versão descomprimida para poder continuar a dar manutenção.

Outra coisa, cuidado com Javascript, por exemplo, quando você carrega uma página com ajax que contém um arquivo js, o jQuery vai executar esse JS quando você o colocar na página, e isso é pouco performático.
Por isso, é de boa prática você usar o ‘live’ para eventos. O ‘live’ diz o seguinte: para todos os objetos que tiverem esse seletor que estão e serão criados vão executar esse callback nesse evento.
Fica assim com jQuery:

$(document).on('click', '.clickable', function(){
      alert('Clicou!!');
});

Ou seja, todo elemento criado DENTRO de document que contém a classe ‘clickable’, vai apresentar um alert quando fizermos o click.

Lógico que isso funciona para os elementos criados dentro de uma determinada div…

A dica aqui é o seguinte: coloque os eventos no live e os carregue e execute antes. Depois, quando o Ajax for acionado, os elementos que estão lá dentro já têm o evento carregado.

Gostaria de agradecer pelo link vou ler com bastante afinco e também pelas explicações, acredito ter entendido exatamente o que você quis dizer. Mas gostaria de consolidar,

Eu devo criar uma instrução igual a esta que você criou porém eu posso escolher a DIV que executará aquela instrução e em qual evento isto será feito, exemplo: click, mouseout, mouseup, etc?

Para mim escolher qual DIV vai executar este comando, qual o campo que devo alterar o '.clickable'? assim:

$(document).on(‘click’, ‘.gratificacoes’, function(){

alert(‘Clicou!!’);

});

Ou vai ficar de outra forma (sintaxe) ?

Eu ja tinha pesquisado e encontrado este live em alguns outros lugares, porém era algo assim:

$(document).on(live((‘click’, ‘.gratificacoes’, function(){

alert(‘Clicou!!’));

});

Na hora da digitação você não esqueceu de alguma “tag” de nome live? ou live é apenas o conceito da instrução?

Como é um JavaScript, eu sempre preciso colocar entre <script></script> certo?

Esta função, eu devo colocar na página principal, ou não há limitações quanto a isso? digo… posso coloca-la diretamente na pagina tgo.jsp que será carregada pelo AJAX?
(Estou perguntando isso pela sua dica: " coloque os eventos no live e os carregue e execute antes " antes que você diz é antes do carregamento de todas as páginas ou na hora
que estou “startando” o servidor esses eventos são carregados quando existe uma instrução live?

R
Rafael_Guerreiro

Vamos lá!

Não esqueci de nenhum nome live… Esse nome era usado nas versões anteriores do jQuery e eles juntaram ela e o bind em um único método, o on…
Segue Docs:
Live (Depreciado e removido)
http://api.jquery.com/live/
Bind
http://api.jquery.com/bind/
On (SUBSTITUI ambos acima, só mudando a forma de usar)
http://api.jquery.com/on/

As diferenças entre o bind e o live:
Bind: Afeta todos os elementos que tiverem aquele seletor mas apenas uma vez, os elementos futuros não serão afetados.
Live: Afeta todos os elementos que tiverem aquele seletor E os futuros que tiverem o mesmo seletor.

Como é javascript, você precisa sim colocar entre as tags script. Mas isso não é uma boa prática.
A boa prática é você criar um arquivo com a extensão .js separado e incluir ele usando a tag script. Assim, o browser faz cache desse script :wink:

Quando eu digo execute antes de carregar, me refiro ao seguinte:
Se você usar o live (escrito na forma do on) na primeira página, todos os elementos carregados DEPOIS via AJAX também vão ter o evento. Ou seja, não carregue código JS no ajax, somente o html… Deixe o código js na página principal.

L
LVentura

Rafael Guerreiro:
Vamos lá!

Não esqueci de nenhum nome live… Esse nome era usado nas versões anteriores do jQuery e eles juntaram ela e o bind em um único método, o on…
Segue Docs:
Live (Depreciado e removido)
http://api.jquery.com/live/
Bind
http://api.jquery.com/bind/
On (SUBSTITUI ambos acima, só mudando a forma de usar)
http://api.jquery.com/on/

As diferenças entre o bind e o live:
Bind: Afeta todos os elementos que tiverem aquele seletor mas apenas uma vez, os elementos futuros não serão afetados.
Live: Afeta todos os elementos que tiverem aquele seletor E os futuros que tiverem o mesmo seletor.

Como é javascript, você precisa sim colocar entre as tags script. Mas isso não é uma boa prática.
A boa prática é você criar um arquivo com a extensão .js separado e incluir ele usando a tag script. Assim, o browser faz cache desse script :wink:

Quando eu digo execute antes de carregar, me refiro ao seguinte:
Se você usar o live (escrito na forma do on) na primeira página, todos os elementos carregados DEPOIS via AJAX também vão ter o evento. Ou seja, não carregue código JS no ajax, somente o html… Deixe o código js na página principal.

Olá pesquisei bastante, até sentei com meu professor ontem e ele tentou me ajudar mas não conseguimos resolver, o meu código está assim:

$( document ).ready(function() {

$("#gra").on(“click”, function(event){

alert(‘teste’);

});

});

porém no Console Firebug ele da um erro na console assim $(…) not is a function, e este erro ocorre na linha do .on(“click”)

a id “gra” é o id de um link, você tem idéia do que pode ser? eu e meu professor pesquisamos na net e encontramos algo sobre conflito de “$”, que informava para utilizarmos
jQuery(…) ao invés de $(…), após fazer isso ele acusa o mesmo erro dizendo que jQuery(…) not is a function

Há algum outro teste que posso fazer?

R
Rafael_Guerreiro

Faltou você colocar o js do jQuery no seu projeto…

Lembre-se de que o HTML, JS e CSS são INTERPRETADOS e não compilados.

O que significa: Você precisa importar o js do jQuery antes de usar qualquer função dele…

Veja se não é esse o problema…

L
LVentura

Rafael Guerreiro:
Faltou você colocar o js do jQuery no seu projeto…

Lembre-se de que o HTML, JS e CSS são INTERPRETADOS e não compilados.

O que significa: Você precisa importar o js do jQuery antes de usar qualquer função dele…

Veja se não é esse o problema…

Então este codígo que passei pra você está dentro do showPhoto.js um arquivo separado.

na minha página HTML, o JQuery é o primeiro a ser carregado, logo depois vem o showPhoto.js, isto tudo na página que eu quero carregar este evento, mas também, este código esta sendo repetido em outras páginas ( a importação do script ), ele pode estar se perdendo nesse caso? ele vai considerar sempre a primeira importação?

R
Rafael_Guerreiro

Ele vai sempre sobrescrever as funções…

Faça um teste:
Crie uma function chamada fazAlgo e mande ela dar um alert(‘1’);

Depois, logo abaixo, crie a mesma function, só que mude o alert para alert(‘2’);

Execute a function e veja qual será executado…

Para que eu consiga te ajudar melhor, seria interessante você postar todos os seus códigos envolvidos nessa tela…

L
LVentura

Rafael Guerreiro:
Ele vai sempre sobrescrever as funções…

Faça um teste:
Crie uma function chamada fazAlgo e mande ela dar um alert(‘1’);

Depois, logo abaixo, crie a mesma function, só que mude o alert para alert(‘2’);

Execute a function e veja qual será executado…

Para que eu consiga te ajudar melhor, seria interessante você postar todos os seus códigos envolvidos nessa tela…

farei isso assim que chegar em casa, eu posso te enviar por e-mail o projeto .war?

R
Rafael_Guerreiro

Pode colocar ele aqui como anexo…

Na hora de gerar o .war, mande o eclipse colocar o código java…

L
LVentura

Rafael Guerreiro:
Pode colocar ele aqui como anexo…

Na hora de gerar o .war, mande o eclipse colocar o código java…

Olá, enviei o projeto via inbox, mas podemos continuar conversando por aqui!

L
LVentura

LVentura:
Rafael Guerreiro:
Pode colocar ele aqui como anexo…

Na hora de gerar o .war, mande o eclipse colocar o código java…

Olá, enviei o projeto via inbox, mas podemos continuar conversando por aqui!

Olá, não querendo ser chato ou cobrar alguma coisa mas creio que tenha esquecido deste tópico, estou respondendo para ver se você lembra ):

R
Rafael_Guerreiro

Vamos lá!

Olhei o seu projeto, primeiro, nunca faça código java em uma JSP. Os códigos devem ficar separados. Depois você vai ver como que deve fazer isso. Mas tenha em mente que a manutenção desse seu sistema vai ser muito custosa se continuar dessa forma.

Segundo, quando eu disse que você só pode ter um <html><head></head> na sua página vc deveria olhar TODAS as outras páginas.

O include te sacaneou aqui, quando você faz o include, ele pega todo o conteúdo e coloca na sua página atual. Ou seja, isso:

&lt;div class="dockTop"&gt;
&lt;jsp:include page="top.jsp"&gt;&lt;/jsp:include&gt;
&lt;/div&gt;

É igual a isso:

&lt;div class="dockTop"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;link rel="stylesheet" href="resources/css/topStyle.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=divTop&gt;
&lt;div class=imageOwl&gt;<img   >&lt;/div&gt;
&lt;div class=nomeUser&gt;&lt;/div&gt;
&lt;div class=botaoSair&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/div&gt;

Não pode fazer isso… Então todas as telas que você usar no include devem ficar iguais à tgo.jsp.
Tome cuidado para não repetir o CSS e JS incluídos pois eles vão ficar duplicados.

L
LVentura

Rafael Guerreiro:
Vamos lá!

Olhei o seu projeto, primeiro, nunca faça código java em uma JSP. Os códigos devem ficar separados. Depois você vai ver como que deve fazer isso. Mas tenha em mente que a manutenção desse seu sistema vai ser muito custosa se continuar dessa forma.

Segundo, quando eu disse que você só pode ter um <html><head></head> na sua página vc deveria olhar TODAS as outras páginas.

O include te sacaneou aqui, quando você faz o include, ele pega todo o conteúdo e coloca na sua página atual. Ou seja, isso:

&lt;div class="dockTop"&gt;
&lt;jsp:include page="top.jsp"&gt;&lt;/jsp:include&gt;
&lt;/div&gt;

É igual a isso:

&lt;div class="dockTop"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;link rel="stylesheet" href="resources/css/topStyle.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=divTop&gt;
&lt;div class=imageOwl&gt;<img   >&lt;/div&gt;
&lt;div class=nomeUser&gt;&lt;/div&gt;
&lt;div class=botaoSair&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/div&gt;

Não pode fazer isso… Então todas as telas que você usar no include devem ficar iguais à tgo.jsp.
Tome cuidado para não repetir o CSS e JS incluídos pois eles vão ficar duplicados.

Olá, efetuei todas as modificações, e coloquei todos os CSS e JS apenas na pagina principal.

Também concordo que fica horrível colocar os códigos java diretamente na JSP, como posso fazer isso em um arquivo separado?

é possível eu chamar um Servlet sem utilizar um Form?? por exemplo para inserir um valor no banco de dados quando eu clicar em um determinado botão que não seja um submit?

R
Rafael_Guerreiro

Use servlet para executar o código java.

É possível sim, mas o ideal é que você use o form para isso…

L
LVentura

Rafael Guerreiro:
Use servlet para executar o código java.

É possível sim, mas o ideal é que você use o form para isso…

Vou tentar te explicar o que queria fazer.

Tenho um botão “Gostei” em cada “Artigo” o usuário irá clicar nesse botão, essa ação deverá inserir no banco de dados em uma contagem de “Gostei” daquele determinado artigo, e deverá em tempo real atualizar o contador

exemplo Gostei(10)
após o clique Gostei(11)

porém a página tem que continuar exatamente no mesmo estado, ou seja não posso recarrega-la.

Para este tipo de coisa seria necessário um form?, da forma que meu professor explicou, minha ideia de usar <form> é apenas para formulários reais, onde o usuário preenche algo, essa idéia esta errada? ele deve ser usado para todo tipo de informação que eu queira processar?

R
Rafael_Guerreiro

Nesse caso não é.

Para isso você vai precisar usar ajax…

Olhe a documentação do jQuery para fazer isso:
http://api.jquery.com/jQuery.ajax/

L
LVentura

Rafael Guerreiro:
Nesse caso não é.

Para isso você vai precisar usar ajax…

Olhe a documentação do jQuery para fazer isso:
http://api.jquery.com/jQuery.ajax/

Vou precisar usar ajax inclusive para fazer a inserção no banco de dados e as regras de negócio? ou posso usar o ajax apenas para atualizar a página dinamicamente e as regras de negócio e a inserção no banco de dados podem ser via java?

Pois por exemplo vou ter outros botões neste estilo, e alguns tem umas regras por exemplo, o do gostei, se a pessoa ja tiver gostado receberá uma mensagem informando que você não pode gostar do mesmo artigo duas vezes.

R
Rafael_Guerreiro

Vai ser tudo via Java. A diferença é a forma como isso vai chegar no java.

Com o form submit, a página é recarregada.
O ajax é uma requisição assíncrona, ou seja, é feita em paralelo, e o retorno dela não vai recarregar a página.

L
LVentura

Vai ser tudo via Java. A diferença é a forma como isso vai chegar no java.

Com o form submit, a página é recarregada.
O ajax é uma requisição assíncrona, ou seja, é feita em paralelo, e o retorno dela não vai recarregar a página.

Bingo, rodei a net procurando se era possível fazer isso, chamar um Servlet via AJAX / Javascript e não encontrei nada muito “garantido” então isso é possível mesmo.

R
Rafael_Guerreiro

Beleza, tente fazer ai. Eu vou estar aqui para te ajudar.

Se você olhar, um dos parametros do $.ajax é url, ou seja, a url da sua servlet…

L
LVentura
Rafael Guerreiro:
Beleza, tente fazer ai. Eu vou estar aqui para te ajudar.

Se você olhar, um dos parametros do $.ajax é url, ou seja, a url da sua servlet...

Amigo consegui fazer o que você disse, em um teste anterior, porém agora não está funcionando, quando o ajax chega no servlet o request não tem os atributos que enviei.

meu código:

function retrieveRascunho(idrascunho, typeRequest){
	$.ajax({   
		type: "post",   
		url: "ProcessRequestsBD",   
		data: { 
			type_request: typeRequest,
			id_rascunho: idrascunho 
		}, 
		success: function(responseText){    
			
			return responseText.split(";");
			
		}   
	});
}

o que pode ser?

segue o código do meu servlet 
/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Enumeration&lt;String&gt; en = request.getAttributeNames();
		System.out.println("estou aqui");
		
		while(en.hasMoreElements()){
			System.out.println(en.nextElement());
		}
		int type = Integer.parseInt(request.getAttribute("type_request").toString());
		switch(type){
		case 111:
			int id_rascunho = Integer.parseInt(request.getAttribute("id_rascunho").toString());
			DraftArticle d = new DraftArticle(id_rascunho);
			d.retrieve(d);
			response.getWriter().write(requestDraft(d));
			RequestDispatcher rd = request.getRequestDispatcher("criarartigo.jsp");
			rd.forward(request, response);
			break;
		}
		
	}

Ja verifiquei no DEBUG, ele entra direitinho, mas quando chega no request.getAttribute("type_request") da null pointer exception, como pode ver tentei listar todos os atributos disponíveis, mas ele não me retorna na console. porque os atributos não estão indo, o que estou fazendo de errado? não possuo mais o exemplo anterior para comparar

Obrigaado.

L
LVentura
LVentura:
Rafael Guerreiro:
Beleza, tente fazer ai. Eu vou estar aqui para te ajudar.

Se você olhar, um dos parametros do $.ajax é url, ou seja, a url da sua servlet...

Amigo consegui fazer o que você disse, em um teste anterior, porém agora não está funcionando, quando o ajax chega no servlet o request não tem os atributos que enviei.

meu código:

function retrieveRascunho(idrascunho, typeRequest){
	$.ajax({   
		type: "post",   
		url: "ProcessRequestsBD",   
		data: { 
			type_request: typeRequest,
			id_rascunho: idrascunho 
		}, 
		success: function(responseText){    
			
			return responseText.split(";");
			
		}   
	});
}

o que pode ser?

segue o código do meu servlet 
/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Enumeration&lt;String&gt; en = request.getAttributeNames();
		System.out.println("estou aqui");
		
		while(en.hasMoreElements()){
			System.out.println(en.nextElement());
		}
		int type = Integer.parseInt(request.getAttribute("type_request").toString());
		switch(type){
		case 111:
			int id_rascunho = Integer.parseInt(request.getAttribute("id_rascunho").toString());
			DraftArticle d = new DraftArticle(id_rascunho);
			d.retrieve(d);
			response.getWriter().write(requestDraft(d));
			RequestDispatcher rd = request.getRequestDispatcher("criarartigo.jsp");
			rd.forward(request, response);
			break;
		}
		
	}

Ja verifiquei no DEBUG, ele entra direitinho, mas quando chega no request.getAttribute("type_request") da null pointer exception, como pode ver tentei listar todos os atributos disponíveis, mas ele não me retorna na console. porque os atributos não estão indo, o que estou fazendo de errado? não possuo mais o exemplo anterior para comparar

Obrigaado.

Descobri meu erro, na verdade não posso recuperar com request.getAttribute(), preciso recuperar com request.getParameter();

Aproveito para perguntar, quando usar um e quando usar outro? para que cada um serve?

L
LVentura
LVentura:
LVentura:
Rafael Guerreiro:
Beleza, tente fazer ai. Eu vou estar aqui para te ajudar.

Se você olhar, um dos parametros do $.ajax é url, ou seja, a url da sua servlet...

Amigo consegui fazer o que você disse, em um teste anterior, porém agora não está funcionando, quando o ajax chega no servlet o request não tem os atributos que enviei.

meu código:

function retrieveRascunho(idrascunho, typeRequest){
	$.ajax({   
		type: "post",   
		url: "ProcessRequestsBD",   
		data: { 
			type_request: typeRequest,
			id_rascunho: idrascunho 
		}, 
		success: function(responseText){    
			
			return responseText.split(";");
			
		}   
	});
}

o que pode ser?

segue o código do meu servlet 
/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Enumeration&lt;String&gt; en = request.getAttributeNames();
		System.out.println("estou aqui");
		
		while(en.hasMoreElements()){
			System.out.println(en.nextElement());
		}
		int type = Integer.parseInt(request.getAttribute("type_request").toString());
		switch(type){
		case 111:
			int id_rascunho = Integer.parseInt(request.getAttribute("id_rascunho").toString());
			DraftArticle d = new DraftArticle(id_rascunho);
			d.retrieve(d);
			response.getWriter().write(requestDraft(d));
			RequestDispatcher rd = request.getRequestDispatcher("criarartigo.jsp");
			rd.forward(request, response);
			break;
		}
		
	}

Ja verifiquei no DEBUG, ele entra direitinho, mas quando chega no request.getAttribute("type_request") da null pointer exception, como pode ver tentei listar todos os atributos disponíveis, mas ele não me retorna na console. porque os atributos não estão indo, o que estou fazendo de errado? não possuo mais o exemplo anterior para comparar

Obrigaado.

Descobri meu erro, na verdade não posso recuperar com request.getAttribute(), preciso recuperar com request.getParameter();

Aproveito para perguntar, quando usar um e quando usar outro? para que cada um serve?

Olha só, encontrei um probliminha ;//

A minha função AJAX só funciona no segundo click, exemplo

eu dou um click que chama a função retrieveRascunho, e ela não funciona, mas na segunda vez que eu clico ela funciona, o que pode ser?

R
Rafael_Guerreiro

É só pesquisar um pouquinho :wink: http://www.guj.com.br/java/61111-requestgetparameter-e-requestgetattribute

Mostre todo o seu código para eu ver como que você chama essa function, pois, aparentemente está certo…

L
LVentura

Rafael Guerreiro:
LVentura:

Descobri meu erro, na verdade não posso recuperar com request.getAttribute(), preciso recuperar com request.getParameter();

Aproveito para perguntar, quando usar um e quando usar outro? para que cada um serve?


É só pesquisar um pouquinho :wink: http://www.guj.com.br/java/61111-requestgetparameter-e-requestgetattribute

Mostre todo o seu código para eu ver como que você chama essa function, pois,aparentemente está certo…

ola obrigado pelo link, agora entendi como funciona ambos, assim que chegar em casa lhe envio o cldigo ajax pelo que eu pesquisei na net, parece que o evento do click nao eh carregado inicialme.tr, qd eu clicp a primeira vez ele eh carregado e na segunda cknsegue executar, lem rei da sua dica do on e do bind mas nao cknsegui implementar, acho q isso resolveria

L
LVentura

Lembro que você disse que esta não é uma boa maneira de fazer isso, mas eu como eu estava testando de varias maneiras diferentes essa é só um teste, depois vou organizar como você mencionou $(#link)…on{‘click’…}.

Este é o código que inicia todo o processo:

Código abrirRascunho(){

var article_id;


function abrirRascunho(valor, idRascunho) {
	var url = valor;
	article_id = idRascunho;
	xmlRequest.open("GET", url, true);
	xmlRequest.onreadystatechange = loadRascunho;
	xmlRequest.send(null);

	return url;
}

código loadRascunho {

function loadRascunho(){
	
	if (xmlRequest.readyState == 4) {
		
	    retrieveRascunho(article_id, 111);
		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;
		
	   
		var change_title = document.getElementById('title_article_rascunho').value = title;
		var change_tags= document.getElementById('tag_article_rascunho').value = tags;
		tinymce.triggerSave();
		mySimpleHtmlInserter('text_article_rascunho', text);//adiciona o html ao editor
	} else {
		
	}
	
}

código retrieveRascunho {

var _vector;


function retrieveRascunho(idrascunho, typeeRequest){
$(document).ready(function(){
	$.ajax({   
		type: "post",   
		url: "ProccessRequest",   
		data: { 
			typerequest: typeeRequest,
			idrascunho: idrascunho 
		}, 
		success: function(responseText){    
			
		
			_vector = responseText.split(";");
	
		}   
	});
});
}

Este é o fluxo dos códigos

R
Rafael_Guerreiro

Basicamente, o problema está aqui:

function retrieveRascunho(idrascunho, typeeRequest){  
//$(document).ready(function(){  
    $.ajax({     
        type: "post",     
        url: "ProccessRequest",     
        data: {   
            typerequest: typeeRequest,  
            idrascunho: idrascunho   
        },   
        success: function(responseText){      
              
          
            _vector = responseText.split(";");  
      
        }     
    });  
//});  
}

Ou seja, precisa retirar o $(document).ready… Essa linha significa o seguinte: "Quando o document estiver pronto, execute o código ajax."
Você não quer isso, você quer que o código ajax seja executado quando você chamar a function.

Outro problema, o AJAX é assíncrono, ou seja, ele vai disparar a requisição e vai continuar o fluxo ANTES da requisição ser respondida pelo server.

Ou seja, na linha aonde vc usa o _vector, na function loadRascunho, o _vector não está inicializado.

Outro problema, você está fazendo uma requisição ajax usando xmlRequest e uma requisição dentro dessa usando jQuery…

Arrume o código para usar somente UMA requisição ajax. E use o jQuery para fazer isso.

L
LVentura

Rafael Guerreiro:
Basicamente, o problema está aqui:

function retrieveRascunho(idrascunho, typeeRequest){  
//$(document).ready(function(){  
    $.ajax({     
        type: "post",     
        url: "ProccessRequest",     
        data: {   
            typerequest: typeeRequest,  
            idrascunho: idrascunho   
        },   
        success: function(responseText){      
              
          
            _vector = responseText.split(";");  
      
        }     
    });  
//});  
}

Ou seja, precisa retirar o $(document).ready… Essa linha significa o seguinte: "Quando o document estiver pronto, execute o código ajax."
Você não quer isso, você quer que o código ajax seja executado quando você chamar a function.

Outro problema, o AJAX é assíncrono, ou seja, ele vai disparar a requisição e vai continuar o fluxo ANTES da requisição ser respondida pelo server.

Ou seja, na linha aonde vc usa o _vector, na function loadRascunho, o _vector não está inicializado.

Outro problema, você está fazendo uma requisição ajax usando xmlRequest e uma requisição dentro dessa usando jQuery…

Arrume o código para usar somente UMA requisição ajax. E use o jQuery para fazer isso.

Olá, tentei entender ao maximo o que você explicou, mas desta vez ficou difícil.

Eu não entendi a parte que estou usando o xmlRequest, qual o problema neste caso? eu aprendi apenas desta forma,a requisição dentro dessa eu entendi, é como se eu estivesse chamando uma Thread dentro de outra Thread (pelo que eu entendi), e entendi também que como é uma Thread, não vai esperar ser executada para continuar o fluxo, assim como existe estes xml.ReadyState == 4, existe algum para aguardar o servidor responder a instrução por completo? na verdade a unica coisa que quero com o AJAX é pegar os dados que vem da requisição e inserir no formulário, não tenho certeza se ele seria necessário para buscar os dados no servidor também, porém não vi outra forma de fazer isso via JQuery.

R
Rafael_Guerreiro

Basicamente, não use xmlRequest pois ele pode se comportar de maneira diferente entre os browsers, o jQuery serve justamente para que você programe de um único jeito.

Sim, ele cria uma thread separada, só que quando você faz o segundo ajax, ele também vai abrir outra thread… Ou seja, fica mais ou menos assim:

  1. Chama o abrirRascunho.
  2. Abre o xmlRequest.
  3. Chama o loadRascunho.
  4. Chama o retrieveRascunho.
  5. Chama o $.ajax.
  6. Volta para o retrieveRascunho e pega os dados do _vector e joga nas variáveis.
    7. A requisição $.ajax é retornada e popula o _vector.

Quando você clica de novo, ele pega o var que ESTAVA no _vector e usa no ponto 6. e atualiza de novo no ponto 7…

Faça um teste, coloque dois alert().

O primeiro fica no final do success do $.ajax.
O segundo fica depois da chamada do retrieveRascunho.

L
LVentura

Rafael Guerreiro:
Basicamente, não use xmlRequest pois ele pode se comportar de maneira diferente entre os browsers, o jQuery serve justamente para que você programe de um único jeito.

Sim, ele cria uma thread separada, só que quando você faz o segundo ajax, ele também vai abrir outra thread… Ou seja, fica mais ou menos assim:

  1. Chama o abrirRascunho.
  2. Abre o xmlRequest.
  3. Chama o loadRascunho.
  4. Chama o retrieveRascunho.
  5. Chama o $.ajax.
  6. Volta para o retrieveRascunho e pega os dados do _vector e joga nas variáveis.
    7. A requisição $.ajax é retornada e popula o _vector.

Quando você clica de novo, ele pega o var que ESTAVA no _vector e usa no ponto 6. e atualiza de novo no ponto 7…

Faça um teste, coloque dois alert().

O primeiro fica no final do success do $.ajax.
O segundo fica depois da chamada do retrieveRascunho.

Eu entendi esta parte, eu ja havia realizado este teste, realmente acontece desta forma e eu não havia me ligado que como é assincrono funciona como Threads e que quando eu faço a requisição ele continua o fluxo antes dos dados estarem completamente preenchidos, o que eu não entendo é que outros métodos posso utilizar ao invés do xmlRequest.

R
Rafael_Guerreiro

Me explique como que você quer que funcione e eu tento te mostrar…

L
LVentura

Tenho uma página com 3 campos.

[input type=“text”] Titulo:
[input type=“text”] Tags:
[input type=“text”] Texto:

E tenho tipo uma lista no canto direito do navegador denominada rascunhos.

<table>
<tr>
<td> Rascunho 1 </td>
</tr>
<td> Rascunho 2 </td>
</tr>
</table>

Esta lista é preenchida pelo meu Servlet, eu recebo um ArrayList dentor da JSP com estes valores, contendo o ID de cada rascunho.

Quando eu clico em um desses links, a JSP vai pegar o ID deste rascunho e vai enviar para o JQuery recuperar estes rascunhos no Servlet.

Estes rascunhos contém titulo, tags e texto.

Quando ele recuperar, ele vai inserir os campos recuperados novamente nos campos texto citados acima.

é isso.

R
Rafael_Guerreiro

Então, você só tem 1 requisição ajax e, depois que essa requisição terminar, você vai popular esses campos…

Algo assim:

$(document).ready(function(){
   $('a.rascunho').on('click', function(){
      var idrascunho = 1; // Pega o ID aqui.
      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
            $('#text_article_rascunho').append(text);
         }
      });
   });
});
L
LVentura
Rafael Guerreiro:
Então, você só tem 1 requisição ajax e, depois que essa requisição terminar, você vai popular esses campos... Algo assim: 
$(document).ready(function(){
   $('a.rascunho').on('click', function(){
      var idrascunho = 1; // Pega o ID aqui.
      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
            $('#text_article_rascunho').append(text);
         }
      });
   });
});

Entendiii! agoraa faz mais um pouco de sentido o que você disse, mas como faço para passar parametros pra essa função?

var idrascunho = 1; // Pega o ID aqui.
      var typeeRequest = 111; // Poe o type aqui.

No caso precisaria pegar o código do rascunho clicado

$('a.rascunho').on('click', function(){
      var idrascunho = 1; // Pega o ID aqui.

porque neste caso, o valor 'a.rascunho' será dinamico, assim como o idrascunho

Já que são varios links preenhidos dentro de uma table, e eu não tenho como dizer que todos eles vão possuir essa função.

R
Rafael_Guerreiro

Você pode escolher uma das seguintes formas:

  1. Usar um atributo já pronto, por exemplo o HREF.
  2. 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.
}
L
LVentura
Rafael Guerreiro:
Você pode escolher uma das seguintes formas: 1. Usar um atributo já pronto, por exemplo o HREF. 2. 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.
}

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:

$('rasc_'+$(this).attr('data-id')).on('click', function(){

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.

>

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

L
LVentura

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.

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()%>)

L
LVentura

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: 
$(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); 
            
          }  
       });  
	});
});

<a href="#" class="rascunhow" data-id="<%=id%>"><%=titulo%></a>

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

R
Rafael_Guerreiro

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

L
LVentura

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!
R
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…

L
LVentura
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...

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: 
$(window).scroll(function() {  

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

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

L
LVentura

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

Criado 15 de maio de 2013
Ultima resposta 4 de jun. de 2013
Respostas 49
Participantes 2

Topicos relacionados

Método p/ strings maiúsculas 8 respostas Realizar Consulta SQL em documento HTML 12 respostas [RESOLVIDO] Problema com o <p:autocomplete> 10 respostas A ID de componente já foi encontrada na visualização 13 respostas Spring 3.1 e Hibernate 4, problemas 3 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo
Fiap Pos-Tech: Front-end Engineering Pós-Graduação para desenvolver habilidades avançadas em tecnologias front-end, com foco em...