Exibir e ocultar div dentro de loop while

Enviada por Fabrício Cruz Casarini 
Fabrício Cruz Casarini
Exibir e ocultar div dentro de loop while
17 de November de 2009 às 08:00AM
Pessoal...

Estou com um probleminha para exibir os resultados de uma consulta em um banco mysql.

Eu queria que os dados da consulta ficassem ocultos usando jquery, o codig até funciona mas só para o primeiro registro, os demais ja aparecem direto e não ocultam a div.

segue pagina de exemplo: http://www.fabriciocruz.net63.net/lista_crianca.php

abaixo o codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ocultando uma div com jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#conteudo').hide();

$('a#exibir').click(function(){

$('#conteudo').show('slow');

});

$('a#ocultar').click(function(){

$('#conteudo').hide('slow');
})
return false;

});
</script>

</head>
<body>
<?php

include ("conn_db.php");

$query = mysql_query("select * from tb_crianca") or die("Erro na query".mysql_error());
$linha = mysql_num_rows($query);
if ($linha==0){
echo "Não foi retornado nenhum registro";
}
else{
while ($dados = mysql_fetch_array($query)){
?>

<style>
body {
font: 12px Verdana, Geneva, sans-serif;

}
#conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>
<a id="exibir" href="#">Exibir DIV</a>
<div id="conteudo">
<p><b>Dados da Criança cadastrada</b></p>
<p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></p>
<p>Alergias: <?php echo $dados["alergias"]; ?></p>
<p>Nome do Médico: <?php echo $dados["medico"]; ?></p>
<p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></p>
<p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></p>
<p><a href="#" id="ocultar">Ocultar Dados</a></p>
</div>
<p />
<?php
}}
?>
</body>
</html>

Desde já agradeço a ajuda!
Carlos Eduardo Gomes Monteiro
Re: Exibir e ocultar div dentro de loop while
17 de November de 2009 às 08:17AM
Cara
ID você deve declarar apenas um...
Então o mais correto seria você fazer assim...

<div id="conteudo1">
<div id="conteudo2">
<div id="conteudo3">
E assim por diante...
Fabrício Cruz Casarini
Re: Exibir e ocultar div dentro de loop while
17 de November de 2009 às 09:25AM
Opa Carlos,

Então, é exatamente essa a saida desejada, mas como poderia fazer isso?
Carlos Eduardo Gomes Monteiro
Re: Exibir e ocultar div dentro de loop while
17 de November de 2009 às 10:04AM
Cara
Não sei se vai ser simples com JQuery não...
Na moda antiga eu vejo uma solução bem simples...
Veja...

Function showing(div_id){
var obj = document.getElementById(div_id).style.display;
if(obj == 'none'){
obj = 'block';
} else {
obj = 'none';
}
}

<a href="javascript:void(0)" onClick="showing('conteudo1');"></a>
<div id="conteudo1" style="display:none">Teste1</div>
<a href="javascript:void(0)" onClick="showing('conteudo2');"></a>
<div id="conteudo2" style="display:none">Teste2</div>
<a href="javascript:void(0)" onClick="showing('conteudo3');"></a>
<div id="conteudo3" style="display:none">Teste3</div>

So que aqui teria dois problemas...
Um é que você já teria que inicia-los como invisíveis
E não teria o efeito sanfona...
Fabrício Cruz Casarini
Re: Exibir e ocultar div dentro de loop while
18 de November de 2009 às 09:36AM
Carlos, obrigado pela ajuda, mas vai ficar complicado... os valores são dinamicos (cadastrados no banco de dados....

Valeu pela ajuda!
Carlos Eduardo Gomes Monteiro
Re: Exibir e ocultar div dentro de loop while
18 de November de 2009 às 10:07AM
Cara
Só não entendi a conexão entre os valores sendo dinâmicos com o problema em questão
Mas tudo bem...
Ricardo Gama
Re: Exibir e ocultar div dentro de loop while
18 de November de 2009 às 11:21AM
De uma olhada na função each do jQuery. Vc resolve isso com as mãos nas costas...

Abcs!!!
ricardo
Re: Exibir e ocultar div dentro de loop while
17 de February de 2010 às 01:35PM
Fala Pessoal,

Ba to com o mesmo problema, consultei o each do jq, mas nao cansigo implementalo.

Ricardo xara ajuda nos e coloca a correçao nesse codigo.

Abs

Ricardo
ricardo
Re: Exibir e ocultar div dentro de loop while
17 de February de 2010 às 01:49PM
Fabrício Cruz Casarini Escreveu:
-------------------------------------------------------
> Pessoal...
>
> Estou com um probleminha para exibir os resultados
> de uma consulta em um banco mysql.
>
> Eu queria que os dados da consulta ficassem
> ocultos usando jquery, o codig até funciona mas
> só para o primeiro registro, os demais ja
> aparecem direto e não ocultam a div.
>
> segue pagina de exemplo:
> http://www.fabriciocruz.net63.net/lista_crianca.ph
> p
>
> abaixo o codigo:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
> Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
> al.dtd">
>
>
>
> Ocultando uma div com jQuery
>
>
> $(document).ready(function(){
>
> $('#conteudo').hide();
>
> $('a#exibir').click(function(){
>
> $('#conteudo').show('slow');
>
> });
>
> $('a#ocultar').click(function(){
>
> $('#conteudo').hide('slow');
> })
> return false;
>
> });
>
>
>
>
> <?php
>
> include ("conn_db.php");
>
> $query = mysql_query("select * from tb_crianca")
> or die("Erro na query".mysql_error());
> $linha = mysql_num_rows($query);
> if ($linha==0){
> echo "Não foi retornado nenhum registro";
> }
> else{
> while ($dados = mysql_fetch_array($query)){
> ?>
>
>
> body {
> font: 12px Verdana, Geneva, sans-serif;
>
> }
> #conteudo {
> border:1px solid #CCCC33;
> padding:10px;
> margin-top:10px;
> width:500px;
> }
>
> Exibir DIV
>
> Dados da Criança cadastrada
> Data de Nascimento: <?php echo
> $dados["dt_nasc_crianca"]; ?>
> Alergias: <?php echo $dados["alergias"]; ?>
> Nome do Médico: <?php echo $dados["medico"]; ?>
> Telefone do Médico: <?php echo
> $dados["tel_medico"]; ?>
> Plano de Saúde: <?php echo
> $dados["plano_saude"]; ?>
> Ocultar Dados
>
>
> <?php
> }}
> ?>
>
>
>
> Desde já agradeço a ajuda!

Fala amigo;

Conseguiu resolver?
se consegiu passa ae please a resposta..

asb
Manoel Jr.
Re: Exibir e ocultar div dentro de loop while
17 de February de 2010 às 09:46PM
Oi Fabrício!

Eu fiz algo parecido, só que eu faço é um loading da galeria de fotos para a div do registro clicado.

Bem, no seu caso, se você vai exibir vários registros e um botão exibe e oculta para cara um, vc precisa identificar qual é o botão clicado para saber qual div exibir e ocultrar. Em imagens eu uso o atributo rel="botao_exibe_<?=n++;?>", com ID também funciona, id="botao_exibe__<?=n++;?>".

Identificado cada botão de "exibir" e de "ocultar", basta no início da função saber qual foi clicado e definir as variáveis que você queira.

Neste caso, você tem X registros exibidos na página, pode ser 5 registros, 10 regisros, etc. Do jeito que você montou, está puxando o ID do botão clicado, só que cada um botão tem que ter um ID único, o que do seu jeito para funcionar direito você teria que ter 10 funções uma para cada id. Por isto que só funciona no primeiro botão.

É bem mais prático você usar um estilo css (bt_exibir e bt_ocultar), para que sirva para todos os botões e atribuir o clique no estilo ou Class eu me confundo com o nome correto. MAS é importante saber o total de registros exibidos por página para poder fazer os if's corretamente. Até se vc não tem como "prever" o máximo de registros, "antes de iniciar a página" só precisa contar todos os registros e depois criar um looping que escreva dentro da função do jquery a quantidade de ifs que vai precisar.

Ex:
$(document).ready(function(){

$('.conteudo').hide(); //Mudei aqui

//Botão Exibir
$(".bt_exibir").click(function() {
if ($(this).attr("id")=='botao_exibe_1'){var_id=1;}
if ($(this).attr("id")=='botao_exibe_2'){var_id=2;}
if ($(this).attr("id")=='botao_exibe_3'){var_id=3;}
$('#conteudo'+var_id).show('slow');
return false;
});

//Botão ocultar
$(".bt_ocultar").click(function() {
if ($(this).attr("id")=='botao_oculta_1'){var_id=1;}
if ($(this).attr("id")=='botao_oculta_2'){var_id=2;}
$('#conteudo'+var_id).hide('slow');
return false;
});

}); //Fim de tudo do jquery

Para o PHP, você coloca o $n++ para ir numerando seus botões. Observe abaixo que mudei o código, e que só no final do looping é que você soma ++ ao $n:

Importante, esta parte tem que vir dentro do <head> </head> e antes de chamar o Jquery.
<style>
body {font: 12px Verdana, Geneva, sans-serif;}
<!--MUDEI, antes estava com ID agora é Class-->
.conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;}
<!--CRIEI duas novas classes -->
.bt_ocultar{font: 12px Verdana, Geneva, sans-serif;}
.bt_exibir{font: 12px Verdana, Geneva, sans-serif;}
</style>


<?php
$n=1; //xxxxxx NOVO xxxxxxxx
include ("conn_db.php");
$query = mysql_query("select * from tb_crianca") or die("Erro na query".mysql_error());
$linha = mysql_num_rows($query);
if ($linha==0){echo "Não foi retornado nenhum registro";}
else{while ($dados = mysql_fetch_array($query)){
?>
<a id="botao_exibe_<?=$n;?>" href="#" class="bt_exibir">Exibir DIV</a> <!-- XXXXX NOVO XXXXX -->
<div id="conteudo_<?=$n;?>" class="conteudo"> <!-- XXXXX NOVO XXXXX -->
<p><b>Dados da Criança cadastrada</b></p>
<p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></p>
<p>Alergias: <?php echo $dados["alergias"]; ?></p>
<p>Nome do Médico: <?php echo $dados["medico"]; ?></p>
<p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></p>
<p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></p>
<p><a href="#" id="botao_oculta_<?=$n++;?>" class="bt_ocultar">Ocultar Dados</a></p> <!-- NOVO aqui vc soma ++ ao $n -->
</div>
<?php
}}
?>

Outra coisa, sempre há como fazer diferente. Atravéz da função "toggle" e também "each" do jquery, acredito que dê para fazer isto com bem poucas linhas de código. Você atribui 2 funções seguidas, uma para mostrar e outra para ocultar. No Help do Jquery tem muitos exemplos, há várias formas de fazer o que você quer.

Espero ter ajudado.

Manoel Jr.
ricardo
Re: Exibir e ocultar div dentro de loop while
18 de February de 2010 às 05:49AM
Fala manoel,

Campeao, podia fazer uma adaptaçao com o each no cod do nosso amigo, para fins de compresao para a gente?

abs

ricardo
ricardo
Re: Exibir e ocultar div dentro de loop while
18 de February de 2010 às 10:17AM
Fala Pessoal,

Com a ajuda de outros amigos aqui esta a solucao:

<script type="text/javascript">
$(document).ready(function(){

$('.conteudo').hide();

$('.exibir').each(function(i){
$(this).click(function(){
$('.conteudo').each(function(j){
if(i == j) $(this).show('slow');
});
});
});
$('.ocultar').each(function(i){
$(this).click(function(){
$('.conteudo').each(function(j){
if(i == j) $(this).hide('slow');
});
});
});
});
</script>


echo '<div>';
echo '<a class="exibir" href="#">Ver</a>--';
echo '<a href="#" class="ocultar">Ocultar</a>';
echo '</div>';

echo '<div class="conteudo">';
echo '<div>';

abs
Manoel Jr.
Re: Exibir e ocultar div dentro de loop while
18 de February de 2010 às 06:58PM
Fala ae Ricardo!

Que viagem! Agora que eu ví que o tópico é de novembro de 2009! Mas tá atual até hoje, heheheh.

Você pediu e eu fiz com o each, mas o que eu fiz, ficou muito extensso, daí eu fiz usando toggle, porque ele vai executando as funções na ordem dos cliques, pode ter quantas quiser. Tem a vantagem de ficar pequininho.
Como de início era para mostrar os resultados do mysql, eu fiz para aceitar quantos botões aparecer na página. Agora só tem um botão/link, o texto muda de exibir para ocultar na hora que for clicado.

Segue o código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ocultando uma div com jQuery</title>
<style>
body {font: 12px Verdana, Geneva, sans-serif;}
p {margin: 0px;}
.conteudo {border:1px solid #CCCC33; padding:10px; margin-top:10px; width:500px;}
.bt_link{font-family: Verdana, Geneva, sans-serif;font-size: 14px;font-weight: bold;color: #F00;}
.bt_exibir{font-family: Verdana, Geneva, sans-serif;font-size: 10px;font-weight: bold;color: #00F;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.conteudo').hide();
//Função Toggle executa as funções na ordem dos cliques,
//pode ter quantas quiser, prático, porque vc
//usa só um botão para mostrar e ocultar, funciona com links também
$(".bt_exibir").toggle(
//1ª Função, pega valor do "name" exibe a div e muda o texto do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Ocultar Div n°'+var_n);
$("#conteudo_bt_"+var_n).show('slow');},
//Segunda função esconde a div e volta o texto normal do botão
function() {
var_n=$(this).attr("name")
$("#bt_"+var_n).attr('value', 'Exibir Div n° '+var_n);
$('#conteudo_bt_'+var_n).hide('slow');}
); //Fim (".bt_exibir").toggle

//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//Togle no link acho que link não aceita ID,
//usei title para guardar o atributo
$(".bt_link").toggle(
function() {
var_x=$(this).attr("title")
$(this).html("Ocultar link nº"+var_x);
$("#cont_link_"+var_x).show('slow');},
function() {
var_x=$(this).attr("title")
$(this).html("Exibir link nº"+var_x);
$('#cont_link_'+var_x).hide('slow');}
); //Fim (".bt_link").toggle
}); //Fim de tudo do jquery
</script>
</head>
<body>
<h1> Exibe oculta Divs </h1>
<hr />
<?php
$n=1;
for ($x=0; $x <=10; $x++) {
?>
<input name="<?=$n;?>" id="bt_<?=$n;?>" type="button" value="Exibir Div n° <?=$n;?>" class="bt_exibir" />
<div id="conteudo_bt_<?=$n++;?>" class="conteudo">
<p><b>Dados da Criança cadastrada</b></p>
<p>Data de Nascimento: <?php echo $dados["dt_nasc_crianca"]; ?></p>
<p>Alergias: <?php echo $dados["alergias"]; ?></p>
<p>Nome do Médico: <?php echo $dados["medico"]; ?></p>
<p>Telefone do Médico: <?php echo $dados["tel_medico"]; ?></p>
<p>Plano de Saúde: <?php echo $dados["plano_saude"]; ?></p>
</div>
<p>&nbsp;</p>
<?php } ?>
<hr />
<h2>Quer usar link em vez de botão?</h2>
<a href="#" title="1" target="_self" class="bt_link">Exibir link n&deg;1</a><br />
<div id="cont_link_1" class="conteudo">Olha o link 1 ae gente!</div>
<a href="#" title="2" target="_self" class="bt_link">Exibir link n&deg;2</a><br />
<div id="cont_link_2" class="conteudo">Olha o link 2 ae gente!</div>
<a href="#" title="3" target="_self" class="bt_link">Exibir link n&deg;3</a><br />
<div id="cont_link_3" class="conteudo">Olha o link 3 ae gente!</div>
</body>
</html>

Agora é com vocês usar a criatividade e dar uma utilidade para isto. :D

Abs,
Manoel Jr.
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.