PHP - Passar consulta no modal

gramosiri2 · Abril 6, 2020

Olá, estou tentando visualizar uma receita utilizando um modal.

O problema é que não consigo passar os dados de acordo com o id selecionado.

Ao clicar no botão de visualizar, mostra apenas o primeiro registro da consulta.

Gostaria de um help, visualizar a consulta de acordo com o registro.

Obrigado.

Segue o codigo:

<table class="table table-bordered tabela" id="receita2" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>COD.</th>
      <th>Data Receita</th>
      <th>Nome Receita</th>
      <th>Categoria</th>
      <th>Visualizar</th>
      <th>Editar</th>
      <th>Deletar</th>
    </tr>
  </thead>
    <tfoot>
    <tr>
      <th>COD.</th>
      <th>Data Receita</th>
      <th>Nome Receita</th>
      <th>Categoria</th>
      <th>Visualizar</th>
      <th>Editar</th>
      <th>Deletar</th>
    </tr>
  </tfoot>
  <tbody>
    <?php 
      while($linha = mysqli_fetch_array($consulta_receita)){

        echo '<tr><td>000'.$linha['id_receita'].'</td>';
        echo '<td>'.$linha['data_receita'].'</td>';
        echo '<td>'.$linha['nome_receita'].'</td>';
        echo '<td>'.$linha["nome_categoria"].'</td>';
      ?>


<!-- MODAL -->
<!-- ----------------------- -->
<?php echo '<div id='.$linha["id_receita"].'>';?>
  <div class="modal fade" id="visuReceitaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Receita</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        <?php 
        echo '<p><span class="visuReceita">Data de criação: </span>'.$linha['data_receita'].'</p>';
        echo '<p><span style="font-weight: bold;">Nome da receita: </span>'.$linha['nome_receita'].'</p>';
        echo '<p><span style="font-weight: bold;">Categoria: </span>'.$linha['nome_categoria'].'</p>';
        echo '<br>';
        ?>
        <h5 class="modal-title" id="exampleModalLabel">Ingredientes</h5>

        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Fim MODAL -->
<!-- ----------------------- -->
      <td><?php 
          echo '<a class="btn btn-primary" href="#'.$linha['id_receita'].'" data-toggle="modal" data-target="#visuReceitaModal"><i class="fas fa-fw fa-eye"></i></a>';
      ?></td>
      <td><a class="btn btn-warning" href="?pagina=inserir_receita&editar=<?php echo $linha['id_receita']; ?>"><i class="fas fa-fw fa-edit"></i></a></td>
      <td><?php echo "<a class='btn btn-danger' href='deleta_receita.php?id_receita=" . $linha["id_receita"] . "' data-confirm='Tem certeza de que deseja excluir o item selecionado?'>";?><i class="fas fa-fw fa-trash"></i></a></td></tr>
    <?php
      }
    ?>

  </tbody>
</table>

bross · Abril 8, 2020

Isso você deve fazer com Ajax e javascript

onclick="visualiza(<?= $linha;?>)"

funcionando visualiza (dados){

$('#receita').html(dados['receita']);

}

Editado Abril 8, 2020 por bross

Frank K Hosaka · Fevereiro 18, 2023

O problema do modal é que ele precisa do JavaScript para enxergar o registro que o usuário escolheu. Nesse exemplo, eu comecei o trabalho no tutorial do bootstrap 5 da w3schools, e criei a função ver( ) no Javascript.

<!DOCTYPE html>
<html lang="en">
<title>Visualizar registro com Bootstrap 5.3</title>
<!--https://www.w3schools.com/bootstrap5/bootstrap_modal.php-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
    crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" 
    crossorigin="anonymous"></script>
<script>
    function ver(jrow){mensagem.innerHTML=JSON.stringify(jrow)}
</script>
<body style="width:40%;margin:0 auto">
<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbreceita"); ?>
<table class="table table-bordered tabela">
<tr><th>Data<th>Receita<th>Valor<th>
<?php
while($row=$query->fetch_assoc()){ $jrow=json_encode($row)?>
<tr><td nowrap><?=$row['data']?><td><?=$row['nome']?><td><?=$row['valor']?>
<td><button type="button" class="btn btn-primary" 
    data-bs-toggle="modal" data-bs-target="#modalSheet" onclick=ver(<?=$jrow?>)>
  visualizar
</button>
<?php } ?>
</table>

<div class="modal modal-sheet bg-secondary py-5" id="modalSheet">
  <div class="modal-dialog" role="alert">
    <div class="modal-content rounded-4">
      <div class="modal-header border-bottom-0">
        <h1 class="modal-title fs-5">Visualizando registro escolhido</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p id=mensagem></p>
      </div>
    </div>
  </div>
</div>

Editado Fevereiro 18, 2023 por Frank K Hosaka

Entrar

PHP - Passar consulta no modal

Pergunta

gramosiri2

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

bross

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades