Passing a PHP variable to a Bootstrap modal

Question

I have a report (table) containing user registrations using the Bootstrap framework.

Next to each row of record there is the Edit option. By clicking on this option the action would be to call the window Modal, and open up the information on that record specifically.

Theoretically, I would have to pass the ID (string PHP) from each record to the window Modal, and from there, I saw mysqli_fetch_array, import the data from the database and display it in the Modal.

But how to do this? Via Javascript?

Follow the code snippet from the report:

<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Usuário</th>
            <th>E-mail</th>
            <th>Cidade</th>
            <th></th>
            <th></th>

        </tr>
    </thead>
    <tbody>

        <?php

           while ($linha = mysqli_fetch_assoc($resultado))
           {
              $id = $linha['id'];
              $numero=$linha['nome'];
              $protol=$linha['usuario'];               
              $protol=$linha['email'];          

              $cidade = $linha['cidade'];
              $cidade1=utf8_encode($cidade);          

              echo '<tr>';
              echo '<td>'.$linha['nome'].'</td>';
              echo '<td>'.$linha['usuario'].'</td>';                 
              echo '<td>'.$linha['email'].'</td>';
              echo '<td>'.$cidade1.'</td>';
              // Aqui iria o botão Editar 

              echo '<td><span class="glyphicon glyphicon-remove" aria-hidden="true" data-target="#" data-toggle="modal"></span></td>';
              echo '</tr>';
          }

          ?>
    </tbody>
</table>

Here the Bootstrap modal window:

<div class="modal fade bs-example-modal-lg" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" 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="myModalLabel">Edição de Usuário</h4>
            </div>
            <div class="modal-body">
                <!-- Aqui iria as informações do usuário a ser editado -->
            </div>
        </div>
    </div>
</div>

Answer 1

In my opinion the best way is to use AJAX (Jquery).

But you can send a request directly through the URL using the GET method. So the page is reloaded again with the form already open and the information loaded.

You could put the ID directly in the edit link for example

<a href="?id=<?php echo $meuid; ?>">EDITAR</a>

I find it very laborious using only PHP, besides you will have a refresh on the page, and for the present day, I consider this nothing elegant =).

I advise you to read this reference: http://www.w3schools.com/jquery/jquery_ajax_intro.asp

If you have any questions about how to use AJAX, I can give you an example.

Answer 2

If you have already populated the table, you can add an identifier p/ each row and when you click you take the data of this line and show in Modal.

If you need information that is not on the line , but it is in the result brought by PHP, you can popular a variable (array) in JS with the data returned by PHP, so when you need to load the data in the modal, you will use the data of the array in JS.

PHP is loaded at another time that your "JS" that will open the modal, so I do not know how with JS to fetch a data within PHP (again), unless you make a request and search only the data you want...

Answer 3

Just to finish the post. I managed to resolve the issue as follows. On the button I used the code

<div class="well well-sm" data-toggle="modal" data-target="#visualizaranexo" data-doc="arquivo22" style="margin-bottom:5px;"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>Arquivo 22</div>. 

In above data-doc I pass the variable I want. The code below fires via ajax this parameter to visualiza_attachment.php, receives the return from it and displays the return in a modal window, which is #visualizaranexo, more specifically within the fetched-data class.

 $(document).ready(function(){
  $('#visualizaranexo').on('show.bs.modal', function (e) {
    var documento = $(e.relatedTarget).data('doc');
    $.ajax({
      type : 'post', 
      url : 'visualiza_anexo.php', 
      data :  'documento='+ documento, 
      success : function(data){
        $('.fetched-data').html(data);
      } 
    });
  });
});

The modal window that will display the return of visualiza_attachment.php:

<div class="modal fade bs-example-modal-lg" id="visualizaranexo" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Visualização de anexo</h4>
      </div>
      <div class="modal-body">
        <div class="fetched-data">
          <!-- Vai abrir aqui o conteudo do arquivo anexo -->
        </div>
      </div>
    </div>
  </div>
</div>