PHP - Passar consulta no modal

[gramosiri2 0]

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>

 

[Public2004 79]

@gramosiri2 Boas. Cada modal que está sendo gerado no loop deve receber um ID único (o que não está acontecendo). Em vez de criar uma DIV pai do modal com este ID, insira o valor (o mesmo do link) diretamente na DIV do modal :

<div class="modal fade" id="<?php $linha['id_receita']; ?>"...

No mais, pensa em otimizar isso aí... Imagina listar 200 registros e gerar os code de cada modal em cada loop...

Abs.

[gramosiri2 0]

Eu ja tentei @Public2004 porém quando passo o id_receito no id dessediv nao carrega o modal, este modal ja usa o id=visuModal para carregar o modal.

16 horas atrás, Public2004 disse:

@gramosiri2 Boas. Cada modal que está sendo gerado no loop deve receber um ID único (o que não está acontecendo). Em vez de criar uma DIV pai do modal com este ID, insira o valor (o mesmo do link) diretamente na DIV do modal :

<div class="modal fade" id="<?php $linha['id_receita']; ?>"...

No mais, pensa em otimizar isso aí... Imagina listar 200 registros e gerar os code de cada modal em cada loop...

Abs.

 

[Public2004 79]

@gramosiri2 Boas e veja bem, "IDs" são únicos e quando você cria esses "modals" dentro do laço, está gerando vários "modals" com o mesmo ID (visuReceitaModal) - isso é um erro. Por isso repito a sugestão, remova a DIV pai que engloba o modal e defina o ID dinâmico no modal do laço, o mesmo ID que será aplicado ao link do modal mais abaixo no laço - assim qdo clicar no link para abrir o modal, será aberto o modal de mesmo ID do link.

 

Outra sugestão para otimizar sua aplicação é a de trabalhar com data-* Attributes do HTML5 + jQuery - Assim você pode criar fora do loop uma única estrutura do modal e carregar os dados dinamicamente com jQuery, esses dados estarão nos atributos do link que este sim, será gerado dentro do loop para armazenar as informações.

 

Abs.

[gramosiri2 0]

@Public2004 desculpe a ignorancia, rsrs. Tinha esquecido de passar o id_receita la no link como você falou, desatenção.

Referente a otimização, vou dar uma olhada nesta sugestão que você trouxe, obrigado!