Duvida usando Ajax - usando JSP

Estou aprendendo a usar a Ajax e estou aprendendo, só que é estou com uma pequena duvida;

1 - Tenho essa table e ao clicar em uma linha da coluna, consigo fazer a requisição ajax de apenas um campo só. até OK!

2 - Só que quando atualizo a página, ele atualiza outro campo.

Concluindo: Estou tentando fazer uma requisição Ajax de 2 campos, mais só está fazendo só um

OBS: Só consigo atualizar o segundo campo, depois que atualizo a página.

Meu DAO
public void finaliza(Long id) {

if(id == null){
		throw new IllegalArgumentException("ID da Tarefa não pode ser nulo.");
	}
	
	String sql= "update tarefas set finalizado = ? , data_finalizacao = ? where id = ?";
	
	try{
		PreparedStatement prepareStatement = conn.prepareStatement(sql);
		prepareStatement.setBoolean(1, true);
		prepareStatement.setDate(2, new Date(Calendar.getInstance().getTimeInMillis()));
		prepareStatement.setLong(3, id);
		
		prepareStatement.execute();
		prepareStatement.close();
	}catch (SQLException e) {
		throw new RuntimeException(e);
	}
	
}

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<%@ 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>
<title>Tarefa adicionada com sucesso</title>
<script type="text/javascript" src="resources/js/jquery-3.2.1.js"></script>
</head>
<body>
<script type="text/javascript">
	function finalizaAgora(id) { //meu método
		$.post("finalizaTarefa",{'id' : id},function(){ //método da servlet
			$("#tarefa_" + id).html("finalizado")
		});
	}
	</script>
	<a href="novaTarefa"> Nova Tarefa?</a>	<br /> <br />

	<table border="1">
		<tr>
			<th>ID</th>
			<th>descricao</th>
			<th>finalizado</th>
			<th>Data de Finalização</th>
		</tr>
		<c:forEach items="${tarefas}" var="tarefa">
			<tr>
				<td>${tarefa.id}</td>
				<td>${tarefa.descricao}</td>
			
				<c:if test="${tarefa.finalizado eq false}">
					<td id="tarefa_${tarefa.id}">
						<a href="#" onclick="finalizaAgora(${tarefa.id})"> Finalizar Agora! </a>
					</td>
				</c:if>
				<c:if test="${tarefa.finalizado eq true}">
					<td> finalizado </td>
				</c:if>
				<td id="tarefaData_"${tarefa.id}>
					<fmt:formatDate value="${tarefa.dataFinalizacao.time}" pattern="dd/MM/yyyy" />
				</td>
				<td>
					<a href="removeTarefa?id=${tarefa.id}"><img alt="deletar Tarefa" src="resources/img/del.png"></a>
				</td>
				<td>
					<a href="mostraTarefaSelecionada?id=${tarefa.id}">atualizar</a>
				</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

Topicos relacionados