Problems when passing ID to MODAL window

Question

I have a page with a table that lists the necessary information and in it several buttons like delete, change, view. The problem is that when I click on visualize (calls the MODAL) it should list a detailed information regarding that selected record, but I have a problem regarding the id passage to make the query and present it on the screen.

Follows code:

<?php include ("cabecalho.php");?>
<?php include ("conexao.php");?>
<?php include ("funcoesBD.php");?>


<?php
//verificaUsuario();
if(isset($_POST['submit'])){
  $nome = $_POST['nome'];
  $produtos = buscaProdutoNome($conexao, $nome);

}else{
  $produtos = listaProdutos($conexao);
}


?>

<form action="consulta-produto.php" method="post">
  <td>
    <label  for="nome">Nome:</label>  
    <input  type="text" name="nome">
  </td>

  <button type= "submit" name="submit" style="border-radius: 3px; width: 80px; height: 30px;"><b>Pesquisar</b></button>
</form>


<div class="table-wrapper">
<table class="table table-hover">

  <thead >
    <tr>
      <th style="display: fixed;">Nome</th>
      <th>Preco</th>
      <th>Cor</th>
    </tr>
  </thead>

  <?php
    foreach($produtos as $produto) :
  ?>

  <tbody>
    <tr>
      <!--<td><?= $produto['id'] ?></td>-->
      <td><?= $produto['nome'] ?></td>
      <td><?= $produto['preco'] ?></td>
      <td><?= $produto['cor'] ?></td>

      <td>
        <a class="btn btn-primary" href="form-altera-produto.php?id=<?=$produto['id']?>">Alterar</a>
      </td>

      <td>
        <input type="hidden" name="id" value="<?=$produto['id']?>">
        <button value="<?=$produto['id']?>" type="submit" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Visualizar</button>
      </td>

      <td>
        <form action="deleta-produto.php" method="post">
          <input type="hidden" name="id" value="<?=$produto['id']?>">
          <button class="btn btn-danger confirmation-callback" onclick="return (window.confirm('Certeza que deseja remover?'));">Remover</button>
        </form>
      </td>

    </tr>  
  </tbody>



  <?php
    endforeach;
  ?>

</table>



<!-- MODAL -->

<?php 
  $id = $produto['id'];
  echo $id;
  $produtos = buscaProduto($conexao, $id);
?>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Informaçoes de Produto</h4>
      </div>
      <div class="modal-body">
        Nome: <?= $produtos['nome'] ?><br> 
        Preço: <?= $produtos['preco'] ?><br>
        Cor: <?= $produtos['cor'] ?><br>
        Peso: <?= $produtos['peso'] ?><br>
        Tamanho: <?= $produtos['tamanho'] ?><br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
      </div>
    </div>
  </div>
</div>
<!--FIM MODAL -->

<?php $totalPagina = paginacao($conexao);

echo "<ul class= pagination pagination-large>
        <li><a href = consulta-produto.php >Primeira Pagina</a></li>
      </ul>";
echo "<ul class= pagination pagination-sm>
        <li><a>...</a></li>
      </ul>";

for($i = 1; $i <= $totalPagina; $i++){

    echo "<ul class= pagination pagination-large>
            <li><a href = \"?pagina=$i\">$i</a></li>
          </ul>";
}

echo "<ul class= pagination pagination-large>
        <li><a>...</a></li>
      </ul>";


echo "<ul class= pagination pagination-large>
        <li><a href = \"?pagina=$totalPagina\">Ultima Pagina</a></li>
      </ul>";
?>

</div>

<?php include ("rodape.php");?>

<?php 



?>

I have tried to pass via POST, put the value on the button like this one, but it always brings me the last ID, in case the last of each page as are listed 5 records per page.

Answer 1

In the main archive:

<button onclick="$('#modal-container').load('modal.php?id=1', function(){$('#modal').modal('show');})">Abrir modal com id = 1</button>
<button onclick="$('#modal-container').load('modal.php?id=2', function(){$('#modal').modal('show');})">Abrir modal com id = 2</button>
<div id="modal-container"></div>

In the modal.php file

<?php // $registro = SELECT no banco baseado em $_GET['id'] ?>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Título do Modal</h4>
            </div>
            <div class="modal-body">
                <!-- Conteúdo do Modal com os dados de $registro -->
            </div>
        </div>
    </div>
</div>

I think you should mount MODAL separately in another "modal.php" file. So, when you click the corresponding button, it would call a function like $("#modal-container"). load("modal.php?id=X"). At the end of the modal.php file there should be the $("#modal") script. modal("show") for it to be displayed.