Dúvida na alteração da conta de

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

Referente ao curso Spring MVC: É hora de criar uma webapp com Spring MVC4, no capítulo Usando AJAX e atividade Mudando o texto da tabela

por Diego Cezar de Oliveira Bernardino

| 119.9k xp | 3 posts

Quando clico em "pagar agora!" o JQuery atualiza o td id="conta_${conta.id}" de "pagar agora!" para "Paga!", porém não altera a coluna "Paga?" nem popula a coluna "Data de Pagamento", isso só ocorre quando dou um refresh na página, a minha dúvida é, isso era o esperado e eu preciso fazer mais alguma coisa para exibir essas alterações ?

<%@ 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">
<title>Lista de Contas</title>
    <script src="resources/js/jquery.js"></script>

</head>
<body>

    <table>
        <tr>
            <th>Código</th>
            <th>Descrição</th>
            <th>Valor</th>
            <th>Tipo</th>
            <th>Paga?</th>
            <th>Data de Pagamento</th>
            <th>Pagar Conta</th>
            <th>Ações</th>
            <th>Alterar Conta</th>
        </tr>

    <c:forEach items="${todasContas}" var="conta">    
        <tr>
            <td>${conta.id}</td>
            <td>${conta.descricao}</td>
            <td>${conta.valor}</td>
            <td>${conta.tipo}</td>
            <td>
                <c:if test="${conta.paga eq false}" >
                Não paga!
                </c:if>
                <c:if test="${conta.paga eq true}" >
                Conta paga!
                </c:if>
            </td>
            <td>
                <fmt:formatDate value="${conta.dataPagamento.time}" pattern="dd/MM/yyyy"/>
            </td>
            <td id="conta_${conta.id}">
                <c:if test="${conta.paga eq false}">

                    <a href="#" onclick="pagaAgora(${conta.id});">Pagar agora!</a>

                </c:if>
                <c:if test="${conta.paga eq true}">
                    Paga!
                </c:if>
            </td>

            <td>
                <a href="removeConta?id=${conta.id}">Deletar</a>
            </td>
            <td>
                <a href="mostraConta?id=${conta.id}">Alterar</a>
            </td>

        </tr>
    </c:forEach>
    </table>
    <script type="text/javascript">


        function pagaAgora(id){
            $.post("pagaConta",{'id' : id}, function(){
                $("#conta_"+id).html("Paga!");

            });
        }

    </script>
</body>
</html>

4 respostas

solução!

por André Chaves

| 1967.1k xp | 2579 posts

Instrutor Lider técnico

08/08/2018

Oi Diego, tudo bom?

Normalmente, nessas alterações de estado por Ajax, a gente precisa dar um tapa com javascript pra manter a tela atualizada sem precisar de outra requisição. Nesse capitulo, o desafio apresentado é atualizar o estado da conta por Ajax, apenas para apresentar a ferramenta.

Entretanto, você pode fazer a implementação completa e compartilhar aqui com a gente, a dificuldade tecnica nao vai fugir muito do exemplo do curso =)

Abraço

por Diego Cezar de Oliveira Bernardino

| 119.9k xp | 3 posts

08/08/2018

Muito obrigado André, era isso que eu queria saber, vou fazer as implementações e mando aqui.

Abraço!

por Diego Cezar de Oliveira Bernardino

| 119.9k xp | 3 posts

08/08/2018

André, conforme prometido, a solução que encontrei foi:

Criar uma nova JSP com as informações atualizadas;
Modificar o Controller para retornar pra essa nova JSP ao invés de retornar o status 200;
Modificar a function para que o callback trouxesse as informações dessa nova JSP e alterasse a minha <tr> da lista.

Segue código da function atual na lista e da nova JSP.

<!-- Function que chama o método paga(Long id, Model modelo) do controller e retorna para a nova JSP,
      recebe como callback os dadosDaResposta da JSP e altera o <tr> com id=conta_${conta.id}
 -->
<script type="text/javascript">


        function pagaAgora(id){
            $.post("pagaConta",{'id' : id}, function(dadosDaReposta){
                $("#conta_"+id).html(dadosDaReposta);
            });
        }

    </script>

<!-- Nova JSP -->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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">
</head>
<body>
    <table>
    <tr>
    <td>${conta.id}</td>
    <td>${conta.descricao}</td>
    <td>${conta.valor}</td>
    <td>${conta.tipo}</td>
    <td>Conta paga!</td>
    <td>
        <fmt:formatDate value="${conta.dataPagamento.time}" pattern="dd/MM/yyyy"/>
    </td>
    <td>Paga!</td>
    <td>
                <a href="removeConta?id=${conta.id}">Deletar</a>
            </td>
            <td>
                <a href="mostraConta?id=${conta.id}">Alterar</a>
            </td>
    </tr>
    </table>
</body>
</html>

por André Chaves

| 1967.1k xp | 2579 posts

Instrutor Lider técnico

08/08/2018

Boa Diego!

Obrigado por compartilhar aqui com a gente =)

Abraço!