Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá todos, estou tentando passar id de um link para um modal, em seguida, vou usar o id para fazer um consulta no banco de dados, e exibir no modal o resultado.
já estou conseguindo passar a id para o modal, porem, a id fica entre tag <p>1</p>, sendo assim, não estou conseguindo armazenar apenas o id dentro de uma variável php, para fazer a consulta no banco, segue o código que estou usando.
link's a ser clicado
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="1">modal</i></a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="2">modal</a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="3">modal</a>
<a id="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="4">modal</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 id="result">
Você carregou a id? <p></p>
<?php
$id = "???"; ?>
</div>
</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>Jquery para chamar modal
<script>
$(window).load(function(){
$(document).ready(function(){
var id_delete = -1;
$("a#delete-row").click(function() {
id_delete = $(this).attr('data-id');
$("#result p").text(id_delete);
});
});
});
</script>como disse antes, após clicar no link preciso exibir dados da consulta sql, dentro do modal, não fora
>
Tente assim:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Teste</title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script>
$(function () {
var id_delete = -1;
$("a.delete-row").click(function (e) {
e.preventDefault();
id_delete = $(this).attr('data-id');
$("#result p").text(id_delete);
});
$('#deleteItem').click(function (e) {
e.preventDefault();
$.ajax({
url: 'deleta.php',
type: "POST",
data: {id: $("#result p").text()},
success: function (res) {
$('#del').html(res);
}
});
});
});
</script>
</head>
<body>
<div>
<a class="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="1">modal</a>
<a class="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="2">modal</a>
<a class="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="3">modal</a>
<a class="delete-row" data-toggle="modal" data-placement="bottom" href="#" data-target="#myModal" aria-hidden="true" data-id="4">modal</a>
</div>
<div class="" 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 id="result">
Você carregou a id? <p></p>
</div>
</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>
</body>
</html>deleta.php
<?php
$id = $_POST['id'];
echo 'O item ' . $id . ' foi deletado!';
?>está quase como eu preciso, só que eu preciso exibir o deleta.php dentro do modal, APÓS CLICAR NO LINK, e não após clicar no botao dentro do modal.
Basta alterar a saída da requisição para dentro do modal
trocando :
$('#del').html(res);
para :
$('#result').html(res);
ficou assim meu código final, muito obrigado kikombat
<script>
$(function () {
var id_delete = -1;
$("a.delete-row").click(function (e) {
e.preventDefault();
id_delete = $(this).attr('data-id');
$.ajax({
url: 'deleta.php',
type: "POST",
data: {id:id_delete},
success: function (res) {
$('#result').html(res);
}
});
});
});
</script>
Tente assim:
<!doctype html>
deleta.php