JQuery + Ajax - JQuery não é processado

[quote=Rafael Guerreiro]Use servlet para executar o código java.

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

[/quote]

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?

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/

[quote=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/[/quote]

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.

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.

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.[/quote]

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.

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…

[quote=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…[/quote]

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

[code]/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Enumeration<String> 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;
	}
	
}[/code]

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.

[quote=LVentura][quote=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…[/quote]

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

[code]/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Enumeration<String> 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;
	}
	
}[/code]

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.[/quote]

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?

[quote=LVentura][quote=LVentura][quote=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…[/quote]

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

[code]/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Enumeration<String> 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;
	}
	
}[/code]

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.[/quote]

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?
[/quote]

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?

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

[quote=Rafael Guerreiro][quote=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?
[/quote]
É 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…[/quote]

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

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

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.

[quote=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.[/quote]

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.

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.

[quote=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.[/quote]

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.

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

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.

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);
         }
      });
   });
});

[quote=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:

[code]
$(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);
     }
  });

});
});
[/code][/quote]

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.