[Resolvido] Problema Array e Jquery

Aprendiz_prog · Fevereiro 17, 2010

Fala 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 resultados do array nao acultam e nem exibem.

Codigo:

js-jquery:

<script type="text/javascript" src="../functions/jquery/jquery.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>

-----------------------------------------

while ($ln = mysql_fetch_array($result)) 
      {
	    echo '<tr><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['data'];
        echo '</td><td>';
		echo $ln['hora'];
        echo '</td><td>';
		echo $ln['ano'];
        echo '</td><td>';
		echo '<div>';
		echo '<a id="exibir" href="#">Ver</a>--';
		echo '<a href="#" id="ocultar">Ocultar</a>';
		echo '</div>';
		echo '</td></tr>';
		echo '<tr><td width="500">';
		echo '<div id="conteudo" style="display:none">';
		echo $ln['dado'];
		echo '</div>';
		echo '</td></tr>';
        		  								
      }
      echo '</table>';
	  
    }
 ?>

andreymor · Fevereiro 17, 2010

Não entendi ao certo, mas quer ocultar TODO o resultado?

sem o jquery, aparecem todos no loop?

se você dá um HIDE com o jquery na camada conteudo, que é a última coluna da sua tabela, pq a camada está com display:none ? Isso já é feito pelo jquery.

E outra, do jeito que tá aí, ele vai ocultar APENAS a camada da ultima coluna

Aprendiz_prog · Fevereiro 17, 2010

Não entendi ao certo, mas quer ocultar TODO o resultado?

sem o jquery, aparecem todos no loop?

se você dá um HIDE com o jquery na camada conteudo, que é a última coluna da sua tabela, pq a camada está com display:none ? Isso já é feito pelo jquery.

E outra, do jeito que tá aí, ele vai ocultar APENAS a camada da ultima coluna

Fala Andrey,

Tudo bem? obrigado por responder....

Bem:

Na verdade gero um array com os dados que necessito, array da 1ª tr dados da pergunta e na 2ª tr tenho uma div = conteudo que sao as respostas, ate ai tudo bem, quero que venham ocultas e quando o user clicar mostrem as respostas.

Agora explico como esta funcionando:

mostra o array com tudo, mas o jquery so funciona na primeira linha do array, faz tudo bonitinho a 1 linha, vem oculta , expande tudo perfeito, e nas demais linhas do loop vem todos os dados sem ocultar as respostas, e nao faz nada o Jquery.

Estive lendo sobre o each do jquery mas nao consigo entender como iterar o loop do php com o jquery, se tiver uma luz amigo te agradeço de coraçao pois isso ta me tirando o sono.

Ah coloquei o display none por que tava tentando faze esse danado funcionar, o hide tb so itera na 1 linha as demais do loop nao fazem nada.

andreymor · Fevereiro 18, 2010

isso deve ocorrer pq você tem mais de uma camada com o id "conteudo" e o jquery só reconhece o primeiro.

para corrigir isso, utilize o .each() do jquery:

http://api.jquery.com/each/

e isso ja passa a ser duvida de JS e não mais de PHP....

;)

Aprendiz_prog · Fevereiro 18, 2010

Ai e que ta o problema necessito ajuda para usar o each no meu cod jquery.

Evandro Oliveira · Fevereiro 18, 2010

não precisa de each.

troque os ID's por classes e utilize o .parent() + .find()

while ($ln = mysql_fetch_array($result)) 
      {
            echo '<tr><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['dado'];
        echo '</td><td>';
        echo $ln['data'];
        echo '</td><td>';
                echo $ln['hora'];
        echo '</td><td>';
                echo $ln['ano'];
        echo '</td><td>';
                echo '<div>';
                echo '<a class="exibir" href="#">Ver</a>--';
                echo '<a class="ocultar" href="#">Ocultar</a>';
                echo '</div>';
                echo '</td></tr>';
                echo '<tr><td width="500">';
                echo '<div class="conteudo" style="display:none">';
                echo $ln['dado'];
                echo '</div>';
                echo '</td></tr>';
                                                                                        
      }
      echo '</table>';
          
    }
 ?>

$(document).ready(function(){
    $('.exibir').click(function(){
        //       <div>     <td>     <tr>
        $(this).parent().parent().parent().find('.conteudo').show();
    });
    $('.ocultar').click(function(){$(this).parent().parent().parent().find('conteudo').hide();});
});

moderação, favor mover =)

Aprendiz_prog · Fevereiro 18, 2010

Fala Evandro,

Esse cod nao funciona para o que preciso, por que e gerado um loop com os dados, tem que ser com o each mesmo, testei teu cod.

exemplo:

Loop:

div

linha1 -- dados -- dados --dados (link.ver - link.ocultar)

/div

div conteudo

linha2 -- Dados (evento.hide - evento.show)

/div

os outros resultados nao iteram, por que nao consigo identificarlos com o each.

Evandro Oliveira · Fevereiro 18, 2010

o each é mais utilizado quando você precisa manipular índices

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<a href="#" class="abreDiv">clique</a>
<a href="#" class="abreDiv">clique</a>
<a href="#" class="abreDiv">clique</a>
<a href="#" class="abreDiv">clique</a>
<a href="#" class="abreDiv">clique</a>

$('.abreDiv').each(function(i){$(this).click(function(){$('div'+i).show()}});

Aprendiz_prog · Fevereiro 18, 2010

Mas ae que ta a questao?

Nao entendo por que funciona somente o primeiro registro do loop e os demais nao, todos os dados que quero ja pego e coloco na table, e so mostrar e ocultar, deve ser uma coisa bem simples, mas ..... vamos como os tres mosqueteros junto unidos jamais serao vencidos rsrsrsrs...

olha so:

Loop:

Table

div

linha1 -- dados -- dados --dados (link.ver - link.ocultar)

/div

div conteudo

linha2 -- Dados (evento.hide - evento.show)

/div

Fecha loop

Outro loop e assim por diante:

div

linha1 -- dados -- dados --dados (link.ver - link.ocultar)

/div

div conteudo

linha2 -- Dados (evento.hide - evento.show)

/div

/Table

-------------------------------------------------------

andreymor · Fevereiro 18, 2010

Pois bem...continuo com a opnião de utilizar o each, é menos código a ser feito.

E não havia a necessidade da troca do ID por classes, poderia ser feito diretamente com o id tb

$("a[id=ocultar]").click();

e sim, existem realmente muitas maneiras de se fazer isso.

Por fim, utilize esse exemplo que o Evandro mandou aí, deve funcionar.

Evandro Oliveira · Fevereiro 18, 2010

Pois bem...continuo com a opnião de utilizar o each, é menos código a ser feito.

E não havia a necessidade da troca do ID por classes, poderia ser feito diretamente com o id tb

$("a[id=ocultar]").click();

e sim, existem realmente muitas maneiras de se fazer isso.

Por fim, utilize esse exemplo que o Evandro mandou aí, deve funcionar.

Somente se o ID fosse único. Quando você define um ID estático dentro de um loop, a saída será o mesmo ID para todas as iterações

Aprendiz_prog, cola pra mim o HTML gerado pelo PHP, por favor?

poste dentro de

para não esticar muito o tópico

andreymor · Fevereiro 18, 2010

Tá aí um exemplo, conforme o exemplo postado pelo Evandro...

<table>
    <tr>
        <td><div id="conteudo0" style="display:none;">Conteúdo 0</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo1" style="display:none;">Conteúdo 1</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo2" style="display:none;">Conteúdo 2</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo3" style="display:none;">Conteúdo 3</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
</table>

<script>
    $("a[id='mostrar']").each(function(i){ $(this).click(function(){ $("#conteudo"+i).show(); }) });
    $("a[id='ocultar']").each(function(i){ $(this).click(function(){ $("#conteudo"+i).hide(); }) });
</script>

Aprendiz_prog · Fevereiro 18, 2010

Pois bem...continuo com a opnião de utilizar o each, é menos código a ser feito.

E não havia a necessidade da troca do ID por classes, poderia ser feito diretamente com o id tb

$("a[id=ocultar]").click();

e sim, existem realmente muitas maneiras de se fazer isso.

Por fim, utilize esse exemplo que o Evandro mandou aí, deve funcionar.

Fala andrey,

Amigo utilizei esse teu cod, e agora funciona todos os links, abre e fecha, porem todos os links abre e fecha abrem e fecham a resposta do 1 registro, e nos links que o danado ta se perdendo, teria que abrir a sua respectiva resposta do loop o link.

estamos quase la amigo..

andreymor · Fevereiro 18, 2010

testou o ultimo que mandei ai?

foi testado aqui e exibe e oculta exatamente a camada que necessita.

Aprendiz_prog · Fevereiro 18, 2010

Tá aí um exemplo, conforme o exemplo postado pelo Evandro...

<table>
    <tr>
        <td><div id="conteudo0" style="display:none;">Conteúdo 0</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo1" style="display:none;">Conteúdo 1</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo2" style="display:none;">Conteúdo 2</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo3" style="display:none;">Conteúdo 3</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
</table>

<script>
    $("a[id='mostrar']").each(function(i){ $(this).click(function(){ $("#conteudo"+i).show(); }) });
    $("a[id='ocultar']").each(function(i){ $(this).click(function(){ $("#conteudo"+i).hide(); }) });
</script>

Mas andrey, nesse exemplo tem conteudo 1 2 3 etc..., o conteudo e gerado no loop e so tem duas divs uma com os links e outro div conteudo com o que deve ser aberto e fechado, no loop cada conteudo dentro da div conteudo, vem diferente pois os dados vem do bd.

andreymor · Fevereiro 18, 2010

E a outra solução, conforme discutida aqui, é essa:

<table>
    <tr>
        <td><div id="conteudo" style="display:none;">Conteúdo 0</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo" style="display:none;">Conteúdo 1</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo" style="display:none;">Conteúdo 2</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
        <tr>
        <td><div id="conteudo" style="display:none;">Conteúdo 3</div></td>
        <td><a href="#" id="ocultar">Ocultar</a></td>
        <td><a href="#" id="mostrar">Ver</a></td>
    </tr>
</table>

<script>
    $("a[id='mostrar']").click(function(){ $(this).parent().parent().find("#conteudo").show(); });
    $("a[id='ocultar']").click(function(){ $(this).parent().parent().find("#conteudo").hide(); });
</script>

andreymor · Fevereiro 18, 2010

Pera lá...eu num entendi foi nada...

Isso aí já remete exatamente ao que você quer, você só precisa ADAPTAR ao seu código. Isso é um exemplo ilustrativo, e o valor dentro de #conteudo é sim, diferente, o que foi feito pra simular exatamente o loop que você faz.

Se o problema é que você não está trabalhando com índices, faça conforme te mandei por ultimo, onde a camada #conteudo é única e não precisa de indice.

Mas lembre-se, isso aí só vai funcionar no seu código, se você verificar ONDE está a camada conteúdo, adicionando parent() ao js.

Evandro Oliveira · Fevereiro 18, 2010

depois quando eu digo que precisa usar classe ao invés de ID... ^_^

Aprendiz_prog · Fevereiro 18, 2010

<table><tr><th>Titulo</th><th>Asunto</th><th>Empresa</th><th>Fecha</th><th>Hora</th><th>Año</th></tr><tr><td><tr><td>xxxxxx</td><td>xxxxxxxxxx</td><td>MENDI</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">You can of course place that SCRIPT tag wherever you want in the page, or you can even reference arrayFromPHP from external scripts as arrayFromPHP is declared as global.</div></td></tr><tr><td><tr><td>adasdasd</td><td>Producto con defecto</td><td>DELTA SUL</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">dasdsadsadsaasdsadsasaaaaaaaaaaaa
dasddddddddddddd
dassssssssssssssssssssss</div></td></tr><tr><td><tr><td>dasdadasdada</td><td>lalalalalalaal</td><td>MENDI</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">You can of course place that SCRIPT tag wherever you want in the page, or you can even reference arrayFromPHP from external scripts as arrayFromPHP is declared as global.
</div></td></tr><tr><td><tr><td>tetetetete</td><td>lalalalalalalalala</td><td>MERCADONA</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">You can of course place that SCRIPT tag wherever you want in the page, or you can even reference arrayFromPHP from external scripts as arrayFromPHP is declared as global.</div></td></tr><tr><td><tr><td>fafafafaf</td><td>lalalalalalalalala</td><td>DELTA SUL</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">Tipo, vou falar o que eu preciso...
 
O negócio é o seguinte. Acostumo fazer o layout do site, exportar e adicionar no html. Dae coloco layers por cima. No conteúdo do site, quero fazer uma barra de rolagem horizontal, ao invés de vertical. Então, para meu layer entender isso, precisa ser dentro de uma tabela cumprida. Se eu faço direto no layer não tem como adicionar o conteúdo ao lado.
 
Ou tem?
 
Valewz!</div></td></tr><tr><td><tr><td>opaaaaa</td><td>lalalalalalalalala</td><td>MERCADONA</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">You can of course place that SCRIPT tag wherever you want in the page, or you can even reference arrayFromPHP from external scripts as arrayFromPHP is declared as global.</div></td></tr><tr><td><tr><td>dasdasdads</td><td>lalalalalalalalala</td><td>CASA E COCO</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">dasdasdasdas</div></td></tr><tr><td><tr><td>adadasdasd</td><td>lalalalalalalalala</td><td>MENDI</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">asdasdasdas</div></td></tr><tr><td><tr><td>teste</td><td>lalalalalalalalala</td><td>DELTA SUL</td><td>0000-00-00</td><td>00:00:00</td><td>0000</td><td><div><a id="exibir" href="#">Ver</a>--<a href="#" id="ocultar">Ocultar</a></div></td></tr><tr><td width="500"><div id="conteudo">teste</div></td></tr></table>

Fala evandro essa e a tabela gerada.

Aprendiz_prog · Fevereiro 18, 2010

Fala Rapaziada gente fina,

Amigos mudei para classes agora o id; mudei nas div beleza...

so que agora os links abrem tudo e fecham tudo.

Teria que fazer algo do genero:

gerar um id para cada div e colocalo no jquery, de para tratar cada um por separado.

Obrigado a todos pela ajuda e a paciencia com um novato.

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

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

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

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

}); 

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

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

}); 
</script>

Arquivado

[Resolvido] Problema Array e Jquery

Recommended Posts

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreymor 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz_prog 0