0

Tenho um relatório (table) contendo cadastros de usuários utilizando o framework Bootstrap.

Ao lado de cada linha de registro há a opção Editar. Ao clicar nessa opção o ação seria chamar a janela Modal, e abrir as informações daquele registro especificamente.

Teoricamente, eu teria que passar o ID (string PHP) de cada registro para a janela Modal, e de lá, via mysqli_fetch_array, importar os dados do banco de dados e exibi-la na Modal.

Mas como fazer isso? Via Javascript?

Segue o trecho de código do relatório:

<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>

Aqui a janela modal do Bootstrap:

<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>

3 Respostas 3

1

Se você já populou a table, pode adicionar um identificador p/ cada linha e ao clicar você pega os dados dessa linha e mostra no Modal.

Se você precisa de uma informação que não está na linha , mas está no resultado trazido pelo PHP, você pode popular uma variável (array) em JS com os dados retornados pelo PHP, assim quando você precisar carregar os dados no modal, você usará os dados do array em JS.

O PHP é carregado em outro momento que o seu "JS" que abrirá a modal, dessa forma, desconheço como com o JS buscar um dado dentro do PHP (novamente), a não ser que você faça uma requisição e busque só o dado que você quer...

1

Na minha opinião a melhor forma é utilizar AJAX (JQuery).

Mas você pode enviar uma requisição direto pela URL utilizando o metodo GET. Assim a página é recarregada novamente com o formulário já aberto e com as informações carregadas.

Você poderia colocar o ID direto no link de editar por exemplo

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

Eu acho muito trabalhoso usando apenas PHP, além do mais você terá um refresh na pagina, e para os dias atuais, considero isso nada elegante =).

Te aconselho a dar uma lida nesta referência: http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Se você tiver dúvidas de como utilizar o AJAX, posso te fornecer um exemplo.

3
  • Fala Henrique! Então, eu particularmente não gosto de métodos que usam refresh na página também. Essa sua ideia clareou um pouco as coisas. Se você me der um exemplo, com certeza vai ajudar muito.A propósito, essa ideia de usar o GET para capturar o ID e passar esse parametro para a URL é a chave para resolver toda essa questão. 6/07/2016 às 1:35
  • Qual o seu nível de js? sabe alguma coisa? 7/07/2016 às 0:53
  • Apenas para finalizar o post. Consegui resolver a questão da seguinte forma: echo '<a href="#"><div class="well well-sm" data-toggle="modal" data-target="#visualizaranexo" data-doc="'.$varquivo.'" style="margin-bottom:5px;"><span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>'.$varquivo.'</div></a>'; 5/08/2016 às 22:40
0

Apenas para finalizar o post. Consegui resolver a questão da seguinte forma. No botão utilizei o código

<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>. 

Em data-doc acima eu passo a variável que eu quero. O código abaixo dispara via ajax esse parametro para visualiza_anexo.php, recebe o retorno dele e exibe o retorno numa janela modal, que é #visualizaranexo, mais especificamente dentro da 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);
      } 
    });
  });
});

A janela modal que irá exibir o retorno de visualiza_anexo.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .