Duvida sobre modal

6 de dezembro de 2017 8 respostas

Dayson_Rodrigues 6 de dezembro de 2017

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">&times;</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>

8 Respostas

AbelBueno 6 de dez. de 2017

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.

Dayson_Rodrigues 6 de dez. de 2017

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>

AbelBueno 6 de dez. de 2017

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.

Dayson_Rodrigues 6 de dez. de 2017

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>

AbelBueno 6 de dez. de 2017

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?

Dayson_Rodrigues 6 de dez. de 2017

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">&times;</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>

AbelBueno 6 de dez. de 2017

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>

Dayson_Rodrigues 6 de dez. de 2017

Obrigado aí brother, valeu mesmo…!

Criado 6 de dezembro de 2017

Ultima resposta 6 de dez. de 2017

Respostas 8

Participantes 2

8 Respostas

Topicos relacionados