Solucionado
Ao colocar o javascript abaixo como sugerido no exercício, funciona tudo corretamente.
function pagaAgora(id) {
$.post("pagaConta", {'id' : id}, function() {
$("#conta_"+id).html("Paga");
});
}Mas ao tentar fazer uma chamada à uma função externa para alterar o HTML, não funciona mais.
function pagoComSucesso() {
$("#conta_"+id).html("Paga");
}
function pagaAgora(id) {
$.post("pagaConta", {'id': id}, pagoComSucesso);
}Aguém sabe dizer o motivo?
Oi Gabriel. O problema é que você está chamando o pagoComSucesso como se ele fosse uma variável, enquanto ele é um método. Você só precisar chamá-lo assim:
$.post("pagaConta", {'id': id}, pagoComSucesso());Veja se isso ajuda. Abraço
Oi Paulo,
Não. Ali você precisa passar o callback mesmo, então você passa apenas a função, do jeito que o Gabriel fez mesmo.
Tente colocar um alert dentro da função pra ver se ela está sendo invocada, Gabriel.
Um abraço!
Ops, exato Aniche, mas ele precisa declarar a função como anônima então:
pagoComSucesso = function() {
$("#conta_"+id).html("Paga");
}Será que assim resolve?
Abraço
Para ficar certinho, esqueci do var
var pagoComSucesso = function() {
$("#conta_"+id).html("Paga");
} function pagaAgora(id) {
$.post("pagaConta", {'id': id}, pagoComSucesso);
}
var pagoComSucesso = function() {
alert("pago!");
$("#conta_"+id).html("Paga");
}Fiz como sugerido, a conta é marcada como paga do banco, o alert que coloquei como teste é exibido, mas o html não muda.
Será que estou declarando alguma tag errada no resto do html? A diferença é que eu quis trocar o local em que o html seria trocado pelo AJAX.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/js/jquery.js"></script>
<script type="text/javascript">
function pagaAgora(id) {
$.post("pagaConta", {'id': id}, pagoComSucesso);
}
var pagoComSucesso = function() {
alert("pago!");
$("#conta_"+id).html("Paga");
}
</script>
<title>Listagem de contas</title>
</head>
<body>
<h3>Lista de contas</h3>
<table>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Tipo</th>
<th>Valor</th>
<th>Situação</th>
<th>Data Pagamento</th>
<!-- <th>Remover</th>-->
</tr>
<c:forEach items="${todasContas}" var="conta">
<tr>
<td>${conta.id}</td>
<td>${conta.descricao}</td>
<td>${conta.tipo}</td>
<td>${conta.valor}</td>
<td id="conta_${conta.id}">
<c:if test="${conta.paga eq true}">Paga</c:if>
<c:if test="${conta.paga eq false}">Não paga</c:if>
</td>
<td><fmt:formatDate value="${conta.dataPagamento.time}" pattern="dd/MM/yyyy"/></td>
<td><a href="removeConta?id=${conta.id}">Remover</a></td>
<td><a href="mostraConta?id=${conta.id}">Alterar</a></td>
<c:if test="${conta.paga eq false}">
<td>
<a href="#" onClick="pagaAgora(${conta.id})">Pagar</a>
</td>
</c:if>
</tr>
</c:forEach>
</table>
</body>
</html>Existe o td com o nome conta_XXX, Gabriel?
Oi Gabriel, o problema é que você não está passando o id para a segunda função javascript.
function pagaAgora(id) {
$.post("pagaConta", {'id': id}, pagoComSucesso(id));
}
var pagoComSucesso = function(id) {
alert("pago!");
$("#conta_"+id).html("Paga");
}Veja se assim funciona. Abraço
Boa, Paulo!
Fiz de forma semelhante a de Paulo:
function pagaAgora(id) {
try {
$.post("pagaConta", {'id': id}, updatePageInfo(id));
}catch (err) {
document.getElementById("demo").innerHTML = err.message;
}
}
function updatePageInfo(id) {
try {
$("#conta_paga_" + id).html("Sim");
$("#acoes_conta_" + id).html("<a href=\"buscaConta?id=" + id + "\">Editar</a> | <a href=\"removeConta?id=" + id +"\">Remover</a> ");
} catch (err) {
document.getElementById("demo").innerHTML = err.message;
}
}adicionei:
<p id="demo"/>no corpo do html para exibir o conteudo da mensagem do catch
funcionou de boa!