Passar dados para dentro de um modal
Tenho o código abaixo. Gostaria de passar os dados do nome do animal para dentro do modal.
<!DOCTYPE html>
<?php
include 'conexao.php';
?>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders on all sides of the table and the cells:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Raça</th>
<th>Cor</th>
<th>Altura</th>
<th>Peso</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM ANIMAIS";
$resultado = mysqli_query($conexao,$sql);
while ($linhas = mysqli_fetch_array($resultado)){
?>
<tr>
<td><?php echo $linhas[0];?></td>
<td><?php echo $linhas[1];?></td>
<td><?php echo $linhas[2];?></td>
<td><?php echo $linhas[3];?></td>
<td><?php echo $linhas[4];?></td>
<td><?php echo $linhas[5];?></td>
<td><a href="#myModal" class="btn btn-info" role="button" data-toggle="modal">Link Button</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<?php $nome = $_POST['nome'];?>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<?php
include 'conexao.php';
?>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders on all sides of the table and the cells:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Raça</th>
<th>Cor</th>
<th>Altura</th>
<th>Peso</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM ANIMAIS";
$resultado = mysqli_query($conexao,$sql);
while ($linhas = mysqli_fetch_array($resultado)){
?>
<tr>
<td><?php echo $linhas[0];?></td>
<td><?php echo $linhas[1];?></td>
<td><?php echo $linhas[2];?></td>
<td><?php echo $linhas[3];?></td>
<td><?php echo $linhas[4];?></td>
<td><?php echo $linhas[5];?></td>
<td><a href="#myModal" class="btn btn-info" role="button" data-toggle="modal">Link Button</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<?php $nome = $_POST['nome'];?>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Marcelo Santos
Curtidas 0
Respostas
Allison Marques
28/09/2018
Também estou buscando uma resposta a esta solução.
1. Em minha questão, coloquei um while nas div.
2. em todas as div retangular, terá um botão "REGRAS" essas regras são para cada ID cadastrado no BD. Ou seja, cada div retangular é um ID do banco de dados, que cada ID possuem REGRAS distintas.
3. Mas quando, chamo a minha TAG <?php echo $exemplo['regras'] ?>. Não funciona de forma alguma dentro da Modal.
1. Em minha questão, coloquei um while nas div.
2. em todas as div retangular, terá um botão "REGRAS" essas regras são para cada ID cadastrado no BD. Ou seja, cada div retangular é um ID do banco de dados, que cada ID possuem REGRAS distintas.
3. Mas quando, chamo a minha TAG <?php echo $exemplo['regras'] ?>. Não funciona de forma alguma dentro da Modal.
GOSTEI 0
Ian Costa
28/09/2018
Olá Marcelo,
para passar os dados pelo modal tem que fazer o seguinte...
Vc tinha colocado o href para chamar o modal, mas o correto seria usar o data-target, você coloca o id do modal... neste caso #myModal
Depois disso você coloca o "data-(o nome q vc quiser) = " a variavel " para passar o dado para o modal. Por exemplo data-id = "$linhas[0]" data-nome= "$linhas[1]"
Mas apenas isto não funciona... precisa do script
Tenta ai! Valeu
para passar os dados pelo modal tem que fazer o seguinte...
<td><a class="btn btn-info" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $linhas[0];?>" data-nome="<?php echo $linhas[1];?>"
Vc tinha colocado o href para chamar o modal, mas o correto seria usar o data-target, você coloca o id do modal... neste caso #myModal
Depois disso você coloca o "data-(o nome q vc quiser) = " a variavel " para passar o dado para o modal. Por exemplo data-id = "$linhas[0]" data-nome= "$linhas[1]"
Mas apenas isto não funciona... precisa do script
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) { <<<<<<<<<<<#myModal = nome do modal
var button = $(event.relatedTarget) // Button that triggered the modal
var recipientId = button.data('id') <<<<<<<<<<< button.data('id') é o data-id que você passou em cima
var recipientNome = button.data('nome') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('#id').val(recipientId) << pega o valor armazenado no recipient e substitui no modal onde o #id = o id do campo no modal para substituir
modal.find('#nome').val(recipientNome)
})
</script>
Tenta ai! Valeu
GOSTEI 0
Thiago
28/09/2018
IAN COSTA, no meu modal eu tenho um form, que caso clico em SIM, aciona a action do form, nessa action eu preciso receber o id para prosseguir com a exclusão.
Como eu seto esse valor ali na minha action do form?
modal.find('#id').val(recipientId)
action="funcoes/funProdutos.php?funcao=excProdutos&pro_id=<?=$pro_id?>" >
<!-- Modal DESEJA EXCLUIR --> <div id="modalExcProduto" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="container " align="center"> <i class="fas fa-users display-1"></i> <h5 class="modal-title" id="exampleModalLongTitle">Confirma exclusão desse Cliente?</h5> </div> </div> <form name="formExcluiProduto" method="post" action="funcoes/funProdutos.php?funcao=excProdutos&pro_id=<?=$pro_id?>" > <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Não</button> <button type="submit" class="btn btn-success">Sim</button> </div> </form> </div> </div> </div>
Como eu seto esse valor ali na minha action do form?
modal.find('#id').val(recipientId)
action="funcoes/funProdutos.php?funcao=excProdutos&pro_id=<?=$pro_id?>" >
GOSTEI 0
Ailton Santos
28/09/2018
Olá Marcelo,
para passar os dados pelo modal tem que fazer o seguinte...
Vc tinha colocado o href para chamar o modal, mas o correto seria usar o data-target, você coloca o id do modal... neste caso #myModal
Depois disso você coloca o "data-(o nome q vc quiser) = " a variavel " para passar o dado para o modal. Por exemplo data-id = "$linhas[0]" data-nome= "$linhas[1]"
Mas apenas isto não funciona... precisa do script
Tenta ai! Valeu
para passar os dados pelo modal tem que fazer o seguinte...
<td><a class="btn btn-info" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $linhas[0];?>" data-nome="<?php echo $linhas[1];?>"
Vc tinha colocado o href para chamar o modal, mas o correto seria usar o data-target, você coloca o id do modal... neste caso #myModal
Depois disso você coloca o "data-(o nome q vc quiser) = " a variavel " para passar o dado para o modal. Por exemplo data-id = "$linhas[0]" data-nome= "$linhas[1]"
Mas apenas isto não funciona... precisa do script
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) { <<<<<<<<<<<#myModal = nome do modal
var button = $(event.relatedTarget) // Button that triggered the modal
var recipientId = button.data('id') <<<<<<<<<<< button.data('id') é o data-id que você passou em cima
var recipientNome = button.data('nome') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('#id').val(recipientId) << pega o valor armazenado no recipient e substitui no modal onde o #id = o id do campo no modal para substituir
modal.find('#nome').val(recipientNome)
})
</script>
Tenta ai! Valeu
Funcionou perfeitamente! Obrigado
GOSTEI 0