Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

PF2G

Passar ID por Modal e enviar para ficheiro 'delete.php'

Mensagens Recomendadas

PF2G

Boa tarde,

Eu tenho uma tabela e quer eliminar um item com confirmação (modal - bootstrap).

Anchor para eliminar:

<a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-times"></i></a>

Modal (logo abaixo da tabela):

			    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
					    <div class="modal-content">
						    <div class="modal-header">
							    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
							    <h4 class="modal-title" id="myModalLabel">Eliminar #ID</h4>
						    </div>

						    <div class="modal-body">
							    <p>Tem a certeza que pretende eliminar o Item 'NOME ITEM'?</p>
						    </div>

						    <div class="modal-footer">
							    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							    <button type="button" id="deleteItem" class="btn btn-danger">Eliminar</button>
						    </div>
					    </div>
				    </div>
			    </div>

No header, suponho, que tenha que acrescentar um script em ajax/json para passar o ID para o delete.php

Será que me podem ajudar?

Obrigado.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
PF2G

Fiz umas pequenas alterações e acrescentei o código Javascript, mas não está a fazer nada:

Javascript (header.php)

	<script>
		$(document).ready(function(){
			$(document).on('click', '.delete-row', function(e){
				e.preventDefault();
				id = $(this).attr('data-id');
			});
			$(document).on('click', '#deleteItem', function(e){
				window.location = 'delete/' + id;
			});
		});
	</script>

anchor:

<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#"" data-target="#myModal" aria-hidden="true" data-id="'.$idItem .'"><i class="fa fa-times"></i></a>

Modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								<h4 class="modal-title" id="myModalLabel">Eliminar #12</h4>
							</div>

							<div class="modal-body">
								<p>Tem a certeza que pretende eliminar o Item 'Nome Item'?</p>
							</div>

							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
								<button type="button" id="deleteItem" class="btn btn-danger">Eliminar</button>
							</div>
						</div>
					</div>
				</div>

Editado por PF2G

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
RuiAlmeida20

<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="1"><i class="fa fa-times"></i></a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="2"><i class="fa fa-times"></i></a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="3"><i class="fa fa-times"></i></a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="4"><i class="fa fa-times"></i></a>

<div id="result">Qual carreguei? <p></p></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
											<div class="modal-dialog">
													<div class="modal-content">
															<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
																	<h4 class="modal-title" id="myModalLabel">Eliminar #12</h4>
															</div>

															<div class="modal-body">
																	<p>Tem a certeza que pretende eliminar o Item 'Nome Item'?</p>
															</div>

															<div class="modal-footer">
																	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
																	<button type="button" id="deleteItem" class="btn btn-danger">Eliminar</button>
															</div>
													</div>
											</div>
									</div>
<div id="del"></div>

$(document).ready(function(){
var id_delete = -1;
$("a#delete-row").click(function() {
   id_delete = $(this).attr('data-id');
	$("#result p").text("Carregaste na row: " + id_delete);
});
$("button#deleteItem").click(function() {
	if(id_delete != -1) {
		//window.location = 'delete/' + id_delete;
		$("#del").html('<b><font style="color:green">Eliminaste a row: ' + id_delete + '</font></b>');
	}else {
		$("#del").html('<b><font style="color:red">Erro</font></b>');
	}

});
});

Vê esse código, aqui está a funcionar:

https://jsfiddle.net/n0tt_/eqzu21tv/

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
PF2G

Não faz nada, necessita de alguns scripts obrigatórios?

Isto é o que estou a chamar:

<!-- jQuery -->
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/administrador/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap Core Javascript -->
    <script src="/administrador/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin Javascript -->
    <script src="/administrador/bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <script src="/administrador/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="/administrador/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

   <script src="/administrador/dist/js/sb-admin-2.js"></script>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
RuiAlmeida20

Eu só precisei do jquery mas esse tu já tens..

mete assim:

$(window).load(function(){
$(document).ready(function(){
   var id_delete = -1;
   $("a#delete-row").click(function() {
   id_delete = $(this).attr('data-id');
    $("#result p").text("Carregaste na row: " + id_delete);
   });
   $("button#deleteItem").click(function() {
    if(id_delete != -1) {
	    //window.location = 'delete/' + id_delete;
	    $("#del").html('<b><font style="color:green">Eliminaste a row: ' + id_delete + '</font></b>');
    }else {
	    $("#del").html('<b><font style="color:red">Erro</font></b>');
    }

   });
});
});

Editado por RuiAlmeida20

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
RuiAlmeida20

É só tirares as // vê que o

<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="'.$idItem .'"><i class="fa fa-times"></i></a>

tem de estar assim..

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.