Jump to content
Elisame Araújo

Retorno de Dados dentro de um Lightbox

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

image.thumb.png.aba602c7fa4f241826ff35d2d0dccc03.png

 

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.

 

Share this post


Link to post
Share on other sites

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.

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By k9studio
      Olá meus Amigos,
       
      Estou tendo dificuldades em eliminar dados repetidos de uma session
      é um sisteminha de pesquisa de domínios com array
      quero eliminar quando já tiver um nome na session, não deixar gravar outro
      aguem pode ajudar
      veja como está  
      Array ( [0] => Array ( [type] => register [domain] => testeteste.com.br [regperiod] => 1 ) [1] => Array ( [type] => register [domain] => testeteste.com [regperiod] => 1 ) [2] => Array ( [type] => register [domain] => testeteste.net.br [regperiod] => 1 ) [3] => Array ( [type] => register [domain] => testeteste.com.br [regperiod] => 1 ) [4] => Array ( [type] => register [domain] => testeteste.com [regperiod] => 1 ) [5] => Array ( [type] => register [domain] => testeteste.net.br [regperiod] => 1 ) ) Desde já muito obrigado a todos
    • By realisacnovaes
      Sou novo no fórum e não sei se postei no lugar certo, mas desde já peço desculpas.
       
      Eu estou com um projeto de desenvolver um chat online, porém preciso de algumas ajudas e pago pelo serviço.
       
      já tenho um chat em php (modelo livre construido e disponibilizado de graça no youtube) e gostaria de fazer algumas modificações tais como:
      - Chat em grupo
      - Deletar mensagem para mim/todos
      - ligação por áudio e vídeo
       
      outras coisas adicionais.
      alguém poderia me ajudar ou alguém disponível para eu contratar?
    • By Jack Oliveira
      Ola pessoal boa noite me veio uma duvida sobre Informações em JSON
      bom tenho um dominio principal que contem todas as informações 
      deste dominio quero uma forma que outras site receba as notificações de novos post etc...
      Ex: meudominiomaster.com
      dominiocliente.com
       
      meu html e o json esta assim
       
      <?php //ESTE FICARAR NO PAINEL DO CLIENTE $json = file_get_contents("https://meusitemaster.com/sites-novos.php"); $json_output = json_decode($json, true); foreach($json_output as $InfoJson){ $UrlJson=''.ConfigPainel(url_base_json.'; } ?> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6" style="background-color:transparent; margin-bottom:25px;"> <div class="card"> <div class="card-header white"><strong> <?= $InfoJson['titulo']; ?> <span class="btn btn-primary float-right">Novo na Loja</span></strong></div> <div class="card-body p-0"> <img class="img-fluid" src="<?= $UrlJson; ?>assets/imagens/<?= $InfoJson['banner']; ?>" /> <ul class="list-group list-group-flush no-b"> <li class="list-group-item"> <i class="icon icon-calendar text-blue"></i>Data: <?= $InfoJson['data']; ?> </li> </ul> </div> <div class="card-footer white text-center"> <a class="btn btn-sm btn-primary tooltips" target="_blank" href="_blank" data-tooltip="Comprar <?= $InfoJson['titulo']; ?>"><i class="icon-shopping_cart"></i></a> </div> </div> </div> <?php }} ?> Minha duvida é teria outra forma de fazer isso em json?? ou seja mais profissional?
    • By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.