php Retorno de Dados dentro de um Lightbox

Elisame Araújo · Outubro 29, 2020

Seguinte, estou criando uma página dinâmica para um site de clã de jogos e essa página vai listar todos os membros. Até aí, tudo bem, eu consegui buscar dentro do banco de dados os nomes dos membros, mas, quando preciso com que uma div que abre um lightbox com resumo do perfil do membro, acaba retornando apenas o resultado referente a primeira ID, no caso a 1. O que rola é todos os membros, ficam com a mesma informação de resumo curto e UF, por exemplo, mesmo que no banco de dados isso seja individual. Para explicar melhor:

Este código, busca os membros e algumas colunas no banco de dados.

    $conecta = mysqli_connect($servidor,$usuario,$senha,$banco);

    if(mysqli_connect_errno())
    {
        die("Falha ao se conectar com: " . mysqli_connect_errno());
    } 
	
        //Consulta Membros
    
        $membros = "SELECT m.id, m.nick, m.estado, m.idstatus, m.resumocurto, m.resumolongo, m.data_cadastro, m.canalyt, assalto, medico, suporte, atirador, pilotoaviao, tanque, pilotoheli ";
        $membros .= " FROM membros as m ";
        $membros .= " JOIN afinclasse as af ";
        $membros .= " on m.id = af.id ";
        $membros .= " where af.id and m.id ";
        $resultados = mysqli_query($conecta,$membros);

        if(!$resultados)
        {
            die("Falha na consulta de dados. A coluna da tabela selecionada não existe ou seu nome está incorreto.");
        }
    ?>

Que em seguida são exibidos dentro de:

<h3 style="margin-top: 25px;"><strong>Membros Ativos</strong></h3>
			<div class="agileinfo-team-grids">
            <?php
            while($membros = mysqli_fetch_assoc($resultados))
            { ?>
            		<!--- INÍCIO---->
					<div class="col-md-3 wthree-team-grid usuario-foto">
					<img src="images/profile-pic/pic-temp.png" alt="" />
					<h4><a href="perfil.php?usuario=<?php echo $membros['nick'] ?>"><?php echo $membros['nick'] ?></a> #<?php echo $membros['id'] ?><br>
					<span class="badge-membro">Membro</span>
                    </h4>
                    

                    <div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>
                    
                  
				</div>
                <div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">
						<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">Resumo Rápido</h4>
								</div> 
								<div class="modal-body">
									<div class="agileits-w3layouts-info">
                                      <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p>
										<p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p>
                                        <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p>
                                        <p><strong>Jogos:</strong>
                                        
                                        <div class="Qtip">
                                         <img src="images/jogos/bf2.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 2</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf3.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 3</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf4.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 4</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bf1.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield 1</span>
                                         </div>
                                        <div class="Qtip">
                                         <img src="images/jogos/bfv.png" width="26" class="alinhamento-estado">
                                         <span class="Qtiptext">Battlefield V</span>
                                         </div>
                                        </p>
                                        <p><strong>Patente na Platoon:</strong> Cabo</p>
									</div>
								</div>
							</div>
						</div>
					</div>
                    <!--- FIM ---->
</div>

Porém, quando dentro deste código em específico (abaixo), no caso, que abre um lightbox, ele repete os dados da ID 1 do BD, não seguindo, pra ID 2, ID 3, etc.

No caso são as variáveis "resumocurto" e "estado" que se repetem igualmente para todos.

<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">
						<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">×</span></button>	
									<h4 class="modal-title">Resumo Rápido</h4>
								</div> 
								<div class="modal-body">
									<div class="agileits-w3layouts-info">
                             <p><strong>Apresentação Curta:</strong> <?php echo $membros["resumocurto"] ?></p>
							 <p><strong>Estado:</strong> <?php echo $membros['estado'] ?></p>
                             <p><strong>Classe Preferida:</strong> Médico <img src="images/classes/medic.png" width="26" class="alinhamento-estado"></p>
                             <p><strong>Jogos:</strong> "Lista de Jogos"</p>
                             <p><strong>Patente na Platoon:</strong> Cabo</p>

O mais engraçado é, quando eu faço essa busca dentro de uma lista <ul> ou <ol>, ele retorna os dados normalmente para cada perfil.

				<ul>
                <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>
                <li>Ativo: <?php echo $membros["idstatus"] ?></li>
                <li>Estado: <?php echo $membros["estado"] ?></li>
                <li>Resumo Curto: <?php echo $membros["resumocurto"] ?></li>
                <li>Resumo Longo: <?php echo $membros["resumolongo"] ?></li>
                <li>Assalto: <?php echo $membros["assalto"] ?></li>
                <li>Médico: <?php echo $membros["medico"] ?></li>
                <li>Suporte: <?php echo $membros["suporte"] ?></li>
                <li>Atirador: <?php echo $membros["atirador"] ?></li>
                <li>Piloto de Avião: <?php echo $membros["pilotoaviao"] ?></li>
                <li>Tanque: <?php echo $membros["tanque"] ?></li>
                <li>Piloto de Heli: <?php echo $membros["pilotoheli"] ?></li>
                <li>Canal Youtube: <a href="<?php echo $membros['canalyt'] ?>" target="_blank">Link</a></li>
                <li>Adicionado Em: <?php echo date('d-m-Y / H:i:s', strtotime($membros['data_cadastro'])) ?></li>
                </ul>

Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox? Porque ele só retorna esses dados normalmente através de uma lista? O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?

Não sei se ficou claro...

Omar~ · Outubro 30, 2020

17 horas atrás, Elisame Araújo disse:

Existe alguma limitação no PHP para ele exibir dados numa DIV que abre a partir de um lightbox?

Não e sim depende da velocidade de conexão de quem o php vai entregar o HTML renderizado.

17 horas atrás, Elisame Araújo disse:

Porque ele só retorna esses dados normalmente através de uma lista?

O que você se refere quando diz: lista?

17 horas atrás, Elisame Araújo disse:

O que eu preciso modificar no código em si para fazer com que ele apareça normalmente?

Praticamente nada se usar as informações já disponíveis de sua query.

Existem 3 formas de exibir mais detalhes sobre algo em específico.

1 - ~~Ao abrir o modal executar um ajax em algum arquivo que fará a leitura novamente no banco em busca do alvo em questão~~ (As alternativas abaixo são melhores).

2 - Varrer o documento em busca das informações que serão usadas e replicar no modal. (Mais simples)

3 - Levar toda array que veio do banco de dados para o javascript, então usar essas informações para definir o que será mostrado no modal. (como eu prefiro fazer)

Segue o exemplo de como realizar a operação 3

Spoiler


<?php
$membros = [
    ['id' => 0, 'nick' => 'Nick A', 'estado' => 'Estado A', 'idstatus' => 'idStatus A'],
    ['id' => 1, 'nick' => 'Nick B', 'estado' => 'Estado B', 'idstatus' => 'idStatus B'],
    ['id' => 2, 'nick' => 'Nick C', 'estado' => 'Estado C', 'idstatus' => 'idStatus C'],
    ['id' => 3, 'nick' => 'Nick D', 'estado' => 'Estado D', 'idstatus' => 'idStatus D'],
    ['id' => 4, 'nick' => 'Nick E', 'estado' => 'Estado E', 'idstatus' => 'idStatus E']
];

foreach ($membros as $value) {
    ?>
    <p>Nome: <?= $value['nick'] ?>
       <button onclick="verDetalhes('<?= $value['id'] ?>')">Ver tudo</button>
    </p>
    <?php
}
?>

<div id="mostar_detalhes" style="display: none">
    <hr />
    <p data-id=""></p>
    <p data-nick=""></p>
    <p data-estado=""></p>
    <p data-idstatus=""></p>
</div>    

<script>
    var arrayDoPHP = JSON.parse('<?= json_encode($membros) ?>');

    function verDetalhes(indiceDoClick) {
        var numero = parseInt(indiceDoClick),
            mostrar = document.getElementById('mostar_detalhes');

        mostrar.querySelector('[data-id]').innerText = arrayDoPHP[numero].id;
        mostrar.querySelector('[data-nick]').innerText = arrayDoPHP[numero].nick;
        mostrar.querySelector('[data-estado]').innerText = arrayDoPHP[numero].estado;
        mostrar.querySelector('[data-idstatus]').innerText = arrayDoPHP[numero].idstatus;

        mostrar.style.display = 'block';
    }
</script>

Simples usamos a função no php json_encode para transformar o array em uma string, assim essa string pode ser manipulada no javascript.

Só que na capsula usamos o JSON.parse que irá transformar a string em array.

Na pratica é converter o array do php em um array compatível com javascript.

Uma vez que temos todos os dados disponíveis no javascript, bastando clicar no botão chamando um função que irá pegar o índice do click e comparar com o índice do array.

No mais é só ir exibindo os dados.

Elisame Araújo · Outubro 31, 2020

É um pouco mais simples do que parece rs...

Esqueci de citar no caso, que estou aprendendo ainda o PHP como um todo, então é um pouco mais complicado pra mim entender

Citar

Não e sim depende da velocidade de conexão de quem o php vai entregar o HTML renderizado.

Me refiro a se existe alguma limitação em questão de funcionar em uma div oculta, porque aparentemente quando não uso o retorno dentro de um lightbox, ele traz os resultados normalmente.

Citar

O que você se refere quando diz: lista?

No caso, uma lista não ordenada ou ordenada, que usei como exemplo para renderizar esses dados.

A minha dúvida é porque ele não carrega esses dados dentro da lightbox...

Vou pegar um exemplo prático com alguns prints:

Esse é o usuário de ID = 1 no meu banco de dados. Eu coloquei uma lista ordenada do lado direito apenas para ficar visível quais são os dados que estou puxando de dentro do BD.

Ao clicar no botão resumo, ele, apresenta esse lightbox com um resumo rápido do usuário, como por exemplo, uma pequena apresentação (Apresentação Curta) e o Estado de onde o usuário é:

image.png.d452acec36286928ef931a4d2f8ca8e8.png

Essas duas primeiras prints se referem ao usuário de ID = 1.

Agora se eu for para um usuário de ID = 4, o lightbox vai exibir as mesmas informações do carinha do ID = 1. Por exemplo:

image.png.2e08c7b25d924690ff370b3e122bab99.png

Esse é o meu problema rs... Independente do ID que está dentro do BD, os dados enviados para o LIGHTBOX e exclusivamente ele, são iguais para todos. Enquanto se eu uso ele fora, esses dados são retornados normalmente.

Omar~ · Outubro 31, 2020

Por onde começo?!....

Hun... O caso da lista: Possivelmente o problema está na estrutura HTML (algum erro). Pois independente de tag's usadas a repetição de um loop é executada, se for o caso em cada volta do loop o erro/incoerência é repetido.

Como você pode fazer a coisa dar certo:

Primeiramente o seu elemento "LIGHTBOX" deve ficar fora do laço do loop no caso seu é o while.

Citar

Não aconselho o uso de while para varredura de arrays, pois é muito propício a falhas.

O foreach é um recurso próprio para arrays.

O seu lightbox aí contará com toda arquitetura HTML crua ou seja, ele vai ser todo definido o que cada local vai ter porém não vai ter informação alguma.

Assim sendo quando você o exibir povoe esses campos usando o javascript para tal finalidade.

Vou mostrar um exemplo de como você pode obter esses dados do html já renderizado e adicionar em outro local. (Só vou fazer uma linha, nas demais é só repetir a lógica)

Em 29/10/2020 at 20:32, Elisame Araújo disse:

<ul> <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>

Veja:

Spoiler


<button onclick="abrirLightBox('<?= $membros['id'] ?>')">Exemplo</button> <!-- Qual ID vamos mostrar os dados -->
<ul id="sai_daqui_<?= $membros['id'] ?>"> <!-- use o ID para diferenciar cada usuário -->
    <?php /*
     * "<?=" é o mesmo que "<?php echo" só que consome menos memória do servidor
     * A tag <strong> só é uma tag usual para HTML 4 ou anteriores
      <li>Nick: <?php echo $membros["nick"] ?> <strong>#<?php echo $membros["id"] ?></strong></li>
     */ ?>
    <li>
        Nick: <span data-nick=""><?= $membros['nick'] ?></span>
        <span style="font-weight: bold">#<?= $membros['id'] ?></span>
    </li>
</ul>

<!-- No seu lightbox -->
<div id="vem_para_aqui">
    <span data-nick=""></span>
</div>

<script>
    /*
     * Essa função será responsável também em mostrar seu lightbox
     */
    function abrirLightBox(id_do_usuario) {
        /*
         * O pulo do gato!
         * Através do parâmetro "id_do_usuario" sabemos onde buscar as informações
         * de cada usuário em questão
         */
        var procurarEm = document.getElementById('sai_daqui_' + id_do_usuario);

        /* 
         * Local onde vamos povoar as informações
         */
        var colocarEm = document.getElementById('vem_para_aqui');

        /*
         * Obtemos o texto do primeiro local
         */
        var nick = procurarEm.querySelector('[data-nick]').innerText;

        /*
         * colocamos o texto em outro local
         */
        colocarEm.querySelector('[data-nick]').innerText = nick;
    }
</script>

No contexto eu prefiro a minha opção anterior de levar o array do PHP para o javascript.

O que dar no mesmo a única diferença é que agora tem que ficar consultando o documento para encontrar o que mostrar.

Sua questão é extremamente simples. Nada mais do que manipular o html das 3 maneiras que citei antes com javascript e para tal existem incontáveis maneiras de o fazer, mas no fim será sempre exibir algo em um local específico.

Williams Duarte · Novembro 3, 2020

Não sei hoje em dia quais são as limitações do PHP, haja vista que se faz praticamente de tudo com esta linguagem, "Laravel + Livewire é um exemplo disso". Geralmente as limitações vem do desenvolvedor, ignoram as documentações etc, isto independente da linguagem.

Existe uma regra básica para o uso de seletores "ID" com javascript, ele não pode se repetir ou sempre vai pegar o primeiro seletor na DOM, ainda mais sendo todos iguais. Se abrir seu código HTML gerado em algum depurador de JS, verás que sinalizara, que há ID´s duplicadas no documento.

Seu problema está aqui:

<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>

e aqui:

<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">

Mesmo ID para todas as repectivas modais. E este não é o jeito correto para uso de modais, mas resolve. Pesquise por modal + ajax.

Solução para seu caso.
Concatene como id quem vem do banco no loop, deixando o único.
Desta forma:

<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer_<?php echo $membros["id"] ?>">Resumo</a></div>

<div class="modal about-modal fade" id="adbr_killer_<?php echo $membros["id"] ?>" tabindex="-1" role="dialog">

Ou seja, o problema não é o php, ele fez oque você pediu para fazer, o javascript que não sabe que outros dados existem, pois está tudo com o mesmo ID.

Elisame Araújo · Novembro 3, 2020

5 horas atrás, Williams Duarte disse:
Não sei hoje em dia quais são as limitações do PHP, haja vista que se faz praticamente de tudo com esta linguagem, "Laravel + Livewire é um exemplo disso". Geralmente as limitações vem do desenvolvedor, ignoram as documentações etc, isto independente da linguagem.

Existe uma regra básica para o uso de seletores "ID" com javascript, ele não pode se repetir ou sempre vai pegar o primeiro seletor na DOM, ainda mais sendo todos iguais. Se abrir seu código HTML gerado em algum depurador de JS, verás que sinalizara, que há ID´s duplicadas no documento.

Seu problema está aqui:
<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer">Resumo</a></div>
e aqui:
<div class="modal about-modal fade" id="adbr_killer" tabindex="-1" role="dialog">
Mesmo ID para todas as repectivas modais. E este não é o jeito correto para uso de modais, mas resolve. Pesquise por modal + ajax.

Solução para seu caso.
Concatene como id quem vem do banco no loop, deixando o único.
Desta forma:
<div class="badge alinhamento-mais"><a href="#" data-toggle="modal" data-target="#adbr_killer_<?php echo $membros["id"] ?>">Resumo</a></div>
<div class="modal about-modal fade" id="adbr_killer_<?php echo $membros["id"] ?>" tabindex="-1" role="dialog">
Ou seja, o problema não é o php, ele fez oque você pediu para fazer, o javascript que não sabe que outros dados existem, pois está tudo com o mesmo ID.

Era exatamente esse o problema! VALEU MESMO CARA!

Entrar

php Retorno de Dados dentro de um Lightbox

Recommended Posts

Elisame Araújo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elisame Araújo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elisame Araújo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante