Dúvida JQuery

Programação Java
#1

Boa noite a todos…

Estou tentando fazer uma lista de contatos, quando eu clicar na imagem, gostaria que abrisse uma div com as informações do contato…
A div deveria ser preenchida com o conteúdo da página “detalhesContato.jsp” e os parâmetros que eu devo passar para essa página são: idContato, nome, aniversario, idReferencia, descricao

Segue meu código jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="java.util.List"%>
<%@page import="br.com.tathy.model.ContatoDAO"%>
<%@page import="br.com.tathy.model.Contato"%>
<%@page import="br.com.tathy.model.DateFormat"%>

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Lista de Contatos</title>
    
    <!-- inclui a biblioteca JQUEY -->
	<script type="text/javascript" src="jquery-1.3.2.js"></script> 
    
        <script type="text/javascript"> 
	<!--
	
function carregaPagina(meuId, meuNome, meuAniversario, meuIdReferencia, meuDescricao){
				
		$('#divDetalhes').show();

				//método e página que irá chamar
				$.post('detalhesContato.jsp', 
					{
						//dados
						//define o nome e o valor
						//ex: minhaVariavel:meuValor
						
						idContato:meuId,
						nome:meuNome,
						aniversario:meuAniversario,
						idReferencia:meuIdReferencia,
						descricao:meuDescricao
						
					},
				function(data) {
				//nome da div onde será mostrado o retorno da página, chamada via ajax
				$('#divDetalhes').html(data);
				},

		'html');
		return false;	
}	
	
	//-->
    </script>

</head>
<body>

<table border="1" cellspading="0" cellspacing="0" align="center">

	<% ContatoDAO dao = new ContatoDAO();
	List<Contato> listaContato = dao.getLista();
	DateFormat df = new DateFormat();
	
	for (Contato c: listaContato){
 %>
	<tr class="texto">
		<td width="250"><%=c.getNome()%></td>
		<td width="150"><%=c.getReferencia().getDescricao() %></td>

		<td>
		
		<img onclick="carregaPagina('<%=c.getIdContato() %>','<%=c.getNome()%>','<%try{%><%=c.getAniversario() %><%}catch(Exception e){e.printStackTrace();}%>','<%=c.getIdReferencia()%>','<%=c.getReferencia().getDescricao()%>');" id="detalhes" src="imagens/detalhes.png" width="20" heigth="20" alt="Ver Detalhes" style="cursor: pointer; " class="botao" border="0" /> 
		
		</td>
	</tr>
	<%
}
%>

</table>
	<div id="divDetalhes" style="display:none"></div>
</body>
</html>

Já fiz algumas funções em javascript para testar se os parâmetros estão sendo passados corretamente e constatei que sim, porém não funciona… acredito que tenha alguma coisa errada com a função carregaPagina()… mas não consigo encontrar o problema…

Alguém pode me ajudar?!

#2

A função está sendo invocada corretamente?
Mude:

function(data) { $('#divDetalhes').html(data); }

Para function(data, textStatus) { alert( textStatus ); $('#divDetalhes').html(data); }

E veja o que é mostrado.

O textStatus pode retornar:
“timeout”
“error”
“notmodified”
“success”
“parsererror”

#3

Outra coisa.
Tente usar $.ajax ao invés de $.post
Vi na documentação que o textStatus de post retorna sempre success.

Sendo assim, com o $.ajax vc vai conseguir depurar melhor o que acontece (através de o textStatus)
Dê uma olhada na documentação: http://docs.jquery.com/Ajax/jQuery.ajax#options

Cuidado que com o $.ajax vc precisa passar um config object ao invés de parâmetros separados para a função.

Por exemplo:

$.ajax({ url: 'enderecoACarregar.jsp', dataType: 'html' });

[]´s

#4

Muito obrigada pela sua resposta!

Tentei colocar o alert ( textStatus ) e o alert não apareceu, acho que isso significa que é essa parte que está errada né? Mas não sei exatamente o que…

Tentei usar o $.ajax… seria mais ou menos assim?


function carregaPagina(meuId, meuNome, meuAniversario, meuIdReferencia, meuDescricao){
				
		$('#divDetalhes').show();

				//método e página que irá chamar
				$.ajax( 
					{
						url: 'detalhesContato.jsp',
						dataType: 'html',
						//dados
						//define o nome e o valor
						//ex: minhaVariavel:meuValor
						
						idContato:meuId,
						nome:meuNome,
						aniversario:meuAniversario,
						idReferencia:meuIdReferencia,
						descricao:meuDescricao
						
					},

				function(data) {
				alert ( textStatus )		
				//nome da div onde será mostrado o retorno da página, chamada via ajax
				$('#divDetalhes').html(data);
				},

		'html');
		return false;	
}
#5

Oi tathy,

É que vc não modificou a lista de parâmetros da função e o seu $.ajax tbm está errado. Faltou vc dar uma olhada no link que te passei.
Enfim, estou lhe mandando a função carregarPagina intereira reescrita.

[code]function carregaPagina(meuId, meuNome, meuAniversario, meuIdReferencia, meuDescricao) {

$('#divDetalhes').show();

$.ajax({
    url: 'detalhesContato.jsp',
    dataType: 'html',
    data: {
        idContato:meuId,
        nome:meuNome,
        aniversario:meuAniversario,
        idReferencia:meuIdReferencia,
        descricao:meuDescricao
    },
    success: function( data, textStatus ) {
        alert ( textStatus );
        $('#divDetalhes').html(data);
    }
});

}[/code]

O método $.post usa o $.ajax por dentro, passando apenas as quatro opções que são utilizadas. Eu prefiro na maioria das vezes usar o $.ajax por ter mais liberadade na configuração. Como eu falei no post anterior, o $.ajax recebe apenas um parâmetro, que é um config object. Note que inicia com { e termina com } o que é passado para o método.

Dê uma olhada na documentação do jQuery para vc entender.
O endereço é http://docs.jquery.com/Ajax/jQuery.ajax#options
Olhe a aba options e examples tbm.

Agora quanto a sua função, teste a que eu lhe passei e diga o que foi mostrado no alert.
Por ali vc consegue saber o que pode estar acontecendo.

[]´s

#6