Dúvida Caelum FJ21 - Exercício 11.23

Olá, tudo bem ?

Estou com uma dúvida no exercício 11.23. “Exercícios Opcionais: Melhorando nosso AJAX”.
O meu ajax não está carregando sozinho, ainda estou tendo que atualizar a página para a função funcionar. Alguém poderia me dar uma luz ?

Minha lista.jsp
`<%@ 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”%>

Lista

<a href="novaTarefa">Cria uma nova tarefa</a>
<br /> <br />
<table>
<tr>
	<th>Id</th>
	<th>Descrição</th>
	<th>Finalizado?</th>
	<th>Data de finalizacao</th>
</tr>
<c:forEach items="${tarefas}" var="tarefa">
	<tr id="tarefa_${tarefa.id}}">
		<td>${tarefa.id}</td>
		<td>${tarefa.descricao}</td>
		
		<c:if test="${tarefa.finalizado eq false }">
			<td>
				<a href="#" onClick="finalizaAgora(${tarefa.id})" >
					Finalizar
				</a>
			</td>
		</c:if>
		
		<c:if test="${tarefa.finalizado eq true }">
			<td>Finalizado</td>
		</c:if>
		
		<td>
			<fmt:formatDate 
			value="${tarefa.dataFinalizacao.time }" 
			pattern="dd/MM/yyyy" />
		</td>
				
		<td><a href="mostraTarefa?id=${tarefa.id }">Alterar</a></td>
		<td><a href="#" onClick="removeTarefaAjax(${tarefa.id})">Remover</a></td>	
	</tr>
</c:forEach>
</table>

Funções Javascript dentro da body da lista.jsp:

script type=“text/javascript"

function finalizaAgora(id) {

$.post(“finalizaTarefa”, {‘id’ : id}, function(resposta) {

// selecionando o elemento html através da

// ID e alterando o HTML dele

$(”#tarefa_"+id).html(resposta);

removeTarefaAjax();

});

}

/script

script type=“text/javascript"

function removeTarefaAjax(id) {

$.post(“removeTarefaAjax”, {‘id’ : id}, function() {

$(”#tarefa_"+id).closest(“tr”).hide();	

})

}

/script

Minha TarefasController.java
`package br.com.caelum.tarefas.controller;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.validation.BindingResult;

import org.springframework.web.bind.annotation.RequestMapping;

import br.com.caelum.tarefas.dao.JdbcTarefaDao;
import br.com.caelum.tarefas.modelo.Tarefa;

@Controller

public class TarefasController {

@RequestMapping(“novaTarefa”)

public String form() {

return “tarefa/formulario”;

}

@RequestMapping("adicionaTarefa")
public String adiciona(@Valid Tarefa tarefa, BindingResult result) {
	if(result.hasFieldErrors("descricao")) {
		return "tarefa/formulario";
	}
	JdbcTarefaDao dao = new JdbcTarefaDao();
	dao.adiciona(tarefa);
	return "redirect:listaTarefas"; 
}

@RequestMapping("listaTarefas")
public String lista(Model model) {
	JdbcTarefaDao dao = new JdbcTarefaDao();
	model.addAttribute("tarefas", dao.lista());
	return "tarefa/lista";
}

@RequestMapping("removeTarefa")
public String remove(Tarefa tarefa) {
	JdbcTarefaDao dao = new JdbcTarefaDao();
	dao.remove(tarefa);
	return "redirect:listaTarefas";
}

@RequestMapping("mostraTarefa")
public String mostra(Long id, Model model) {
	JdbcTarefaDao dao = new JdbcTarefaDao();
	model.addAttribute("tarefa", dao.buscaPorId(id));
	return "tarefa/mostra";
}

@RequestMapping("alteraTarefa")
public String altera(@Valid Tarefa tarefa, BindingResult result) {
	if(result.hasErrors()) {
		return "tarefa/mostra";
	}
	JdbcTarefaDao dao = new JdbcTarefaDao();
	dao.altera(tarefa);
	return "redirect:listaTarefas";
}

@RequestMapping("finalizaTarefa")
public String finaliza(Long id, Model model) {
  JdbcTarefaDao dao = new JdbcTarefaDao();
  dao.finaliza(id);
  model.addAttribute("tarefa", dao.buscaPorId(id));
  return "tarefa/finalizada";
}

@RequestMapping("removeTarefaAjax")
public void removeTarefaAjax(Long id) {
	Tarefa tarefa = new Tarefa();
	tarefa.setId(id);
	new JdbcTarefaDao().remove(tarefa);
}

}

Minha finalizada.jsp
`<%@ taglib uri=“http://java.sun.com/jsp/jstl/fmt” prefix = “fmt” %>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %>
<%@ page language=“java” contentType="text/html; charset=UTF-8"
pageEncoding=“UTF-8”%>

<td>${tarefa.id}</td>
		<td>${tarefa.descricao}</td>
		
		<c:if test="${tarefa.finalizado eq false }">
			<td>
				<a href="#" onClick="finalizaAgora(${tarefa.id})" >
					Finalizar
				</a>
			</td>
		</c:if>
		
		<c:if test="${tarefa.finalizado eq true }">
			<td>Finalizado</td>
		</c:if>
		
		<td>
			<fmt:formatDate 
			value="${tarefa.dataFinalizacao.time }" 
			pattern="dd/MM/yyyy" />
		</td>
				
		<td><a href="mostraTarefa?id=${tarefa.id }">Alterar</a></td>
		<td><a href="#" onClick="removeTarefaAjax(${tarefa.id})">Remover</a></td>

Topicos relacionados