Passing a PHP variable to a Bootstrap modal

Navigation
0

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

Next to each record line is Edit. Clicking on this option would call the Modal window, and open the information for that record specifically.

Theoretically, I would have to pass the PHP ID of each record to the Modal window, and from there, via mysqli_fetch_array , import the data from the database and display in Modal .

But how to do that? Via Javascript?

Here is the code snippet for 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 is the modal Bootstrap 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>
    
asked by anonymous 05.07.2016 / 21:25

3 answers

0

Just to finish the post. I was able to resolve the issue as follows. In 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 the above doc-date I pass the variable I want. The code below fires via ajax this parameter for visualiza_anexo.php, receives its return and displays the return in a modal window, which is #visualizaranexo, more specifically within the class fetched-data. 

 $(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 view.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>
    
06.08.2016 / 00:55
1

If you have already populated the table, you can add an identifier to each line and click on it to pick up the data for that line and show it in Modal.

If you need information that is not in the line, but it is in the result brought by PHP, you can populate an array in JS with the data returned by PHP, so when you need to load the data in the modal, you will use the array data in JS.

PHP is loaded at a later time than its "JS" that will open the modal, so I do not know how to search for a data inside PHP (again), unless you make a request and search only the data you want ...

    
05.07.2016 / 21:57
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 with the form already open and with the information loaded.

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

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

I find it very hard to use just PHP, besides you will have a refresh on the page, and for the present day, I consider it nothing elegant =).

I encourage you to read this reference: link

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

    
05.07.2016 / 23:40
How to sort by the largest number of groupings, excluding who has no more than one grouping? Hide and Show DIV based on SELECT response