Passar dados para dentro de um modal

28/09/2018

0

Bootstrap MySQL PHP

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>
Marcelo Santos

Marcelo Santos

Responder

Posts

27/04/2019

Allison Marques

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
Gostei + 0

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
Gostei + 0

19/04/2020

Thiago

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.

<!-- 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?>" >
Responder
Gostei + 0

16/06/2020

Ailton Santos

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


Funcionou perfeitamente! Obrigado
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar