PHP como fazer modal que mostra informações da tabela?

[vitizin]

como eu posso trazer informações de uma tabela em um modal sem que saia da página clicando em botão "visualizar"? exemplo abaixo:

[MailingTester]

Olá!
Informações da tabela html? Ou informações de uma tabela de um banco de dados relacional?

a) Se as informações já estão na tabela html:

• Use a mesma fonte de dados que alimentou a tabela html para alimentar a sua modal
• Exiba a modal

b) Se as informações estão numa tabela de um banco de dados:

• Faça uma requisição ajax que busque os dados necessários
• Alimente a sua modal
• Exiba a modal

[DiF]

@vitxr

Em 07/11/2022 às 12:31, vitxr disse:

trazer informações de uma tabela em um modal sem que saia da página

A única forma de fazer isso é implementar o ajax.  Recomendo fazer isso com o jQuery, pois é muito mais prático e tem funções especificas para isso.. por exemplo a função   $.ajax()  Onde nessa função, você insere parâmetros como, url, tipo de arquivo enviado e etc... além disso tem duas funções que podem ser encadeadas com ele que é .done()  e .fail()   onde cada uma respectivamente funciona para mostrar no modal quando tiver sucesso ou mostrar um erro quando falhar.  

Exemplo:

 

No HTML, você insere dinamicamente com o php o valor ID do usuário no atributo "data" no elemento de link ou no elemento que você use como "botão"

Nesse exemplo usei um link... mas pode ser qualquer outro.

<ul>
  <li>Fulano 
      <a href="#" class="btn" data-id="1"><span> Visualizar</span></a>
   </li>
   <li>Beltrano  
      <a href="#" class="btn" data-id="2"><span> Visualizar</span></a>
   </li>
   <li>Ciclano 
       <a href="#" class="btn" data-id="3"><span> Visualizar</span></a>
   </li>
</ul>       

 

let btn = $("#btn_visualizar");

btn.on("click", function(){
  let id = $(this).attr("data-id");
  
   $.ajax({
       url: "visualizar.php",
       method: "GET",
       dataType: "HTML",
       data: {id: id}
   }).done(function(retorno){
       $("#modal").html(retorno);
   
   }).fail(function(retorno){
        $("#modal").html(retorno);
   }); 
});

 

Basicamente, ao clicar no botão visualizar, que está atribuido ao elemento de link <a>,  ele vai pegar o valot do "data-id"  e então vai passar via GET, para o arquivo visualizar.php.  Lá você vai fazer toda a query para pegar os dados na tabela do banco de dados.. baseado no valor ID do usuário.. e então inserir no seu modal.  No arquivo visualizar.php, você monta o jeito de como vai ser mostrado dentro do modal.