Estou aplicando o Bootstrap no meu projeto simple com JSP, e estou com um pequeno problema.
Tenho uma tabela que mostra todos os objetos, dai quando eu clico em excluir, abre o modal e clico em Sim, a partir dai ele não está pegando a linha selecionada, no caso ele está deletando o primeiro elemento.
Segue meu codigo da coluna excluir.
Coluna Excluir
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#modalExcluir">Excluir</button>
<div class="modal fade" id="modalExcluir" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modaAtualizar">Excluir Tarefa</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Deseja exluir a tarefa?</p>
</div>
<div class="modal-footer">
<a href="mvc?logica=RemoveTarefaLogic&id=${tarefa.id}" type="button"
class="btn btn-danger" id="delete">Apagar Registo</a>
<button type="button" data-dismiss="modal" class="btn btn-default">Cancelar</button>
</div>
</div>
</div>
</div>
Você repete esse código para todas as linhas da sua tabela?
Note que tem um ${tarefa.id} diretamente no template, como isso está sendo preenchido?
Cada linha da sua tabela deveria ser capaz de passar o id referente a ela.
certo, antes eu usava um href que já fazia a exclusão direto, só que dessa forma resolvi colocar uma caixa de diaolog para ter um feedback com usuario.
mostrando minha tabela está assim:
<tr>
<c:forEach items="${tarefas}" var="tarefa">
<tr>
<td>${tarefa.id}</td>
<td>${tarefa.titulo}</td>
<td>${tarefa.descricao}</td>
<td>${tarefa.dataFormatada}</td>
<td>${tarefa.situacao}</td>
<td> **Codigo acima que eu informei** </td>
</tr>
</c:forEach>
</tr>
Ah sim, se você está repetindo aquele código para todas as linhas, repare que a parte do modal usa ids no html, e ids nao podem ser repetidos. Provavelmente eles referem a primeira linha por isso.
O que você pode fazer é adicionar o id das tarefa como sufixo nos ids, como modalExcluir e modaAtualizar e testar se isso resolve o problema.
Isso eu já fiz, o meu problema que assim.
Quando faço assim, ele não pega o ID da linha, e ao entrar no modal, quando tento excluir ele pega o primeiro ID da tabela.
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#modalExcluir">Excluir</button>
Caso eu coloque assim, ele já exclui direto sem abrir o modal.
<a href="mvc?logica=RecuperaTarefaLogic&id=${tarefa.id}">
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#modalExcluir">Excluir ${tarefa.id} </button> </a>
Eu nao vi no seu exemplo você adicionando o id da tarefa como parte do id no html. Pode mostrar como ficou? E qual o problema acontece nessa situaçao?
Porque na minha view listar, a coluna que exclui eu criei um arquivo separado que no caso possuia um model, vou colocar o meu codigo completo para você vê como está.
Quando eu clico em qualquer linha da tabela, ele está mostrando o primeiro ID da tarefa, Caso eu não utilize o modal, eu passando o href direto, ele deleta.
minha Tabela.
<c:choose>
<c:when test="${empty tarefas}">
<h4>NÃO EXISTE TAREFAS CADASTRADAS...</h4>
</c:when>
<c:otherwise>
<table class="table table-hover">
<thread>
<tr>
<th>Codigo</th>
<th>Titulo</th>
<th>Descricao</th>
<th>Data</th>
<th>Situacao</th>
<th>Remover</th>
<th>Atualizar</th>
</tr>
</thread>
<tr>
<c:forEach items="${tarefas}" var="tarefa">
<tr>
<td>${tarefa.id}</td>
<td>${tarefa.titulo}</td>
<td>${tarefa.descricao}</td>
<td>${tarefa.dataFormatada}</td>
<td>${tarefa.situacao}</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#modalExcluir">Excluir</button>
<div class="modal fade" id="modalExcluir" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modaAtualizar">Excluir
Tarefa</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Deseja exluir a tarefa ${tarefa.id} ? </p>
</div>
<div class="modal-footer">
<a href="mvc?logica=RemoveTarefaLogic&id=${tarefa.id}"
type="button" class="btn btn-danger" id="delete">Apagar
Registo</a>
<button type="button" data-dismiss="modal"
class="btn btn-default">Cancelar</button>
</div>
</div>
</div>
</div>
</td>
<td><%@ include
file="/WEB-INF/jsp/default/coluna-atualizar.jsp"%></td>
</tr>
</c:forEach>
</tr>
</table>
</c:otherwise>
</c:choose>
Entao, o que eu sugeri foi em todo lugar que você usa um id no html, você adicionar o id da tarefa como sufixo, para o javascript saber identificar qual modal você está se referindo.
Alguns exemplos:
<div class="modal fade" id="modalExcluir${tarefa.id}" role="dialog">
<button type="button" class="btn btn-danger" data-toggle="modal"
data-target="#modalExcluir${tarefa.id}">Excluir</button>
<a href="mvc?logica=RemoveTarefaLogic&id=${tarefa.id}"
type="button" class="btn btn-danger" id="delete${tarefa.id}">Apagar
Registo</a>
Obrigado aí brother, valeu mesmo…!