Passar dados para dentro de um modal

28/09/2018

21

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>
Responder

Posts

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.
Responder

29/04/2019

Ian Costa

Olá Marcelo,
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
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira