How to load the information inside the modal (bootstrap 3.3.6)?

Question

I’m hoping that in the modal, after clicking on the display option, it will load the information. However, it only loads the ID 1 of the table, regardless of which table item I want to view. It always brings the same information. Below is the code of how I’m doing.

<div class="container-fluid">
    <table class="table table-striped" data-toggle="table"
           data-search="true"
           data-show-refresh="true"
           data-show-columns="true">
        <thead>
            <tr>
                <th class="th-small" data-align="left" data-sortable="true">ID</th>
                <th data-align="left" data-sortable="true">Nome</th>
                <th class="th-small">Ações</th>
            </tr>
        </thead>
        <tbody>
            <?php
            foreach ($idade as $key => $v) {
                ?>
                <tr>

                    <td><?= $v->id ?></td>
                    <td><?= $v->titulo ?></td>
                    <td>
                        <form data-toggle="validator" method="POST" enctype="multipart/form-data">
                        <div class="dropdown">
                            <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                            <ul class="table-modal dropdown-menu">
                                <li class=""><a data-toggle="modal" data-target="#modal-select">Visualizar</a></li>
                                <li><a data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

    <!-- Modal VISUALIZAR -->
    <div class="modal fade" id="modal-select" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="cadastroIdadelLabel">Visualizar - Idade</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" role="form" data-toggle="validator" action="Idade/page/visualizar">
                        <fieldset>
                            <div class="form-group">
                                <div>
                                    <label>Idade:</label>
                                    <?= $v->titulo ?>

                                </div>
                                <div>
                                    <label>Código:</label>
                                    <?= $v->id ?>
                                </div>

                            </div>
                        </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>

                </div>
                </form>
            </div>
        </div>
    </div>

Answer 1

I went through the same problem a few months ago. To solve the case, I did it this way.

• I made a new page . php only for modal content.

  <?php include('config.php'); // Arquivo de acesso ao banco de dados
  
  if(isset($_GET['id_registro'])) // Recebe o ID do registro que deseja carregar
  {
      ?>
          <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal Legal</h4>
          </div>
          <div class="modal-body">
              Conteúdo do modal. Coloque aqui todo o código que quer que apareça dentro do modal.
              Faça a pesquisa no banco de dados em php, etc...
          </div>
      <?php
  } php?>
  

• I put the modal "mold" on the page where the modal will be used.

  <div id="idDivModal" class="modal fade">
      <div class="modal-dialog modal-lg">
          <div class="modal-content">
          </div>
      </div>
  </div>
  

• Now the link that, when clicked, will open the modal with the database information (should be on the page where the modal will be used).

  <a href='#idDivModal' role='button' data-toggle='modal' data-load-remote='paginamodal.php?id_registro=".$id_registro."' data-remote-target='#idDivModal .modal-content' title='Título' aria-hidden='true' />
  

• Finally, the Javascript code that will make it work (should be on the page where the modal will be used).

  <script>
   $('[data-load-remote]').on('click',function(e) {
      e.preventDefault();
      var $this = $(this);
      var remote = $this.data('load-remote');
      if(remote) {
          $($this.data('remote-target')).load(remote);
      }
   });
  </script>
  

Done. That’s it. Now don’t forget to include Bootstrap and jQuery on your page.