Como dar slideDown em um <ul> de uma pagina recém carregada por ajax?

[FelipeSAMA]

Boa noite pessoal, sou iniciante em programação, vamos ver se consigo explicar:

Tenho uma página com uma <ul> de nove <li>, um sidebar. todas <li> tem o mesmo href

<ul>
   <li>Especializações</li>
   <li><a href="#espec.php" class="spec1" >Ortodentia</a></li>
   <li><a href="#espec.php" class="spec2" >Periodontia</a></li>
    ....
</ul>

Depois de clicar em alguma <li>, outra página PHP vai ser carregada dentro de um container.

Essa página recém carregada tem nove <ul class='ul-spec'>, cada uma com uma ID diferente que corresponde ao <li> do sidebar acima(#spec1, #spec2, etc) suas <li> estão Hidden. EXEMPLO:

<ul class="ul-spec" id="spec1" ><h3>Ortodendia</h3>
<li class="li-description" style="display:none">
<p>bla bla bla bla....</p>
</li>
</ul>

Então...

Eu só consigo dar slideDown depois que a página espec.php já estiver carregada.

Como ficaria meu script para que o visitante clicasse na <li> do sidebar e automaticamente ocorresse o slideDown da <ul> correspondente logo depois da "espec.php" ter sido carregada?

Um exemplo: clicar em <li class="spec1">, carregar o "espec.php" no container e dentro desse container efetuar slidedown no <ul class="ul-spec" id="spec1"> correspondente.

Já tentei de tudo, escrevi trocentos códigos diferentes, não deu certo.

Thanks!

Obrigado a quem estiver lendo...

[DiF]

Olá, por gentileza poderia postar como você está fazendo a requisição?

[FelipeSAMA]

Ahh sim.. Eu estou usando um plugin de jquery que carrega páginas dentro de uma DIV e viabiliza histórico e gera endereços no browser de acordo com o link que você clicar.

EX: ao clicar em <li><a href="#espec.php" class="spec1">Ortodentia</a></li> o endereço muda para "www.site.com.br/#espec.php"

o código que faz a requisição eu acho que é esse

$(function(){

// Keep a mapping of url-to-container for caching purposes.

var cache = {

// If url is '' (no fragment), display this div's content.

'': $('.bbq-default')

};

// Bind an event to window.onhashchange that, when the history state changes,

// gets the url from the hash and displays either our cached content or fetches

// new content to be displayed.

$(window).bind( 'hashchange', function(e) {

// Get the hash (fragment) as a string, with any leading # removed. Note that

// in jQuery 1.4, you should use e.fragment instead of $.param.fragment().

var url = $.param.fragment();

// Remove .bbq-current class from any previously "current" link(s).

$( 'a.bbq-current' ).removeClass( 'bbq-current' );

// Hide any visible ajax content.

$( '.bbq-content' ).children( ':visible' ).hide();

// Add .bbq-current class to "current" nav link(s), only if url isn't empty.

url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );

if ( cache[ url ] ) {

// Since the element is already in the cache, it doesn't need to be

// created, so instead of creating it again, let's just show it!

cache[ url ].show();

} else {

// Show "loading" content while AJAX content loads.

$( '.bbq-loading' ).show();

// Create container for this url's content and store a reference to it in

// the cache.

cache[ url ] = $( '<div class="bbq-item"/>' )

// Append the content container to the parent container.

.appendTo( '.bbq-content' )

// Load external content via AJAX. Note that in order to keep this

// example streamlined, only the content in .infobox is shown. You'll

// want to change this based on your needs.

.load( url, function(){







// Content loaded, hide "loading" content.

$( '.bbq-loading' ).hide();



});

}

})

// Since the event is only triggered when the hash changes, we need to trigger

// the event now, to handle the hash the page may have loaded with.

$(window).trigger( 'hashchange' );

});

O conteúdo ajax vai para dentro do $( '.bbq-content' ) e o $( '.bbq-loading' ) é um pré loading que aparece enquanto a pagina em ajax esta sendo carregada, depois ele desaparece.

[DiF]

Cara.. acho talvez deste jeito seja mais fácil resolver o problema da requisição e o efeito slideDown..

$(document).ready(function(){
    //atribui um evento Click ao um link do menu
    $('#menu a').click(function(){
            //resgata o valor que dentro do atributo href, e indica a pasta do arquivo
            var pagina = 'pagina/'+$(this).attr('href');

            //indica o elemento será enviado o arquivo carregada 
            $('#content').load(pagina, function(){
                    //aplica o efeito do plugin slideDown()
                    $("#content").slideDown("slow");
            });
            return false;
        });


});

no seu ul pode colocar assim:

 <li><a href="espec.php" class="spec1" >Ortodentia</a></li>

nesse jeito você carrega a pagina com a função load, aplica o efeito slidedown na div ou elemento que queira...

[FelipeSAMA]

Legal! e consigo fazer isso mesmo sem desabilitar o plugin?

[DiF]

Até consegue.. mas pode dar conflito se não se ligar na hora de digitar o código....

acredito que esse plugin faz uma "volta" enorme com o mesmo objetivo do código que eu postei mais acima.

[FelipeSAMA]

Então... O plugin tem mil e poucas linhas, teria que ter um conhecimento ****** em javascript pra entneder como funciona direito. Eu uso pela praticidade, porque ele gera um endereço a cada link clicado e também habilita histórico sem dar pau. Eu ja tinha tentado de outras formas fazer a mesma coisa, mas nunca consegui, esse plugin resolveu tudo... Só que eu ficaria limitado caso tivesse que adaptar pras minhas ncecessidades.

mas então, não é bem o "container" que precisa dar slideDown. Seria o <ul> recém carregado na nova página, esse <ul> tem um ID de mesmo nome do <li> no side bar. Entendeu?

ex: clicar em <a href="espec.php" class="spec1" rel="specs"> e dar slideDown no <ul id="spec1"> que está na nova página

Acho que a função callback teria que ser algo assim

$( "a[rel='specs']" ).click(function() {
 var spec = $(this).attr("class");
  switch(spec) {
    case 'spec1': $('#spec1').children(".li-description").slideDown( 150 ); break;
    case 'spec2': $('#spec2').children(".li-description").slideDown( 150 ); break;
    case 'spec3': $('#spec3').children(".li-description").slideDown( 150 ); break;
    case 'spec4': $('#spec4').children(".li-description").slideDown( 150 ); break;
    case 'spec5': $('#spec5').children(".li-description").slideDown( 150 ); break;
    case 'spec6': $('#spec6').children(".li-description").slideDown( 150 ); break;
    case 'spec7': $('#spec7').children(".li-description").slideDown( 150 ); break;
    case 'spec8': $('#spec8').children(".li-description").slideDown( 150 ); break;
    case 'spec9': $('#spec9').children(".li-description").slideDown( 150 ); break;
 }		
});

vou tentar aqui, se não der certo aviso! ^^

Então, tentei aqui e não funcionou... Ele apenas carrega a página mas não faz o slideDown no <ul class="ul-spec" id="spec1" > da página recém carregada

a intenção é clicar num link por exemplo:

<li><a href="#espec.php" rel="specs" value="1" class="spec1" >Ortodentia</a></li>

e com isso

carregar #spec.php em <div class="bbq-content"> + slideDown em <ul class="ul-spec" id="spec1" >

veja como deixei

$( "a[rel='specs']" ).click(function(){
  //resgata o valor que dentro do atributo href, e indica a pasta do arquivo
  var pagina = 'http://www.endereco.com.br/paginas/'+$(this).attr('href');

  //indica o elemento será enviado o arquivo carregada 
  $('.bbq-content').load(pagina, function(){
  //até aqui beleza, carrega certinho, mas depois o slideDown não funciona

  var spec = $(this).attr("class");
  switch(spec) {
  case 'spec1': $('#spec1').children(".li-description").slideDown( 150 ); break;
  case 'spec2': $('#spec2').children(".li-description").slideDown( 150 ); break;
  case 'spec3': $('#spec3').children(".li-description").slideDown( 150 ); break;
  case 'spec4': $('#spec4').children(".li-description").slideDown( 150 ); break;
  case 'spec5': $('#spec5').children(".li-description").slideDown( 150 ); break;
  case 'spec6': $('#spec6').children(".li-description").slideDown( 150 ); break;
  case 'spec7': $('#spec7').children(".li-description").slideDown( 150 ); break;
  case 'spec8': $('#spec8').children(".li-description").slideDown( 150 ); break;
  case 'spec9': $('#spec9').children(".li-description").slideDown( 150 ); break;
  }
 });
 return false;
});

Não deu certo, tentei colocar pelo atributo value também e nada

//atribui um evento Click ao um link do menu
$( "a[rel='specs']" ).click(function(){
  //resgata o valor que dentro do atributo href, e indica a pasta do arquivo
  var pagina = 'http://www.felipeandres.com.br/CEO2/paginas/'+$(this).attr('href');

  //indica o elemento será enviado o arquivo carregada 
  $('.bbq-content').load(pagina, function(){
  //aplica o efeito do plugin slideDown()
  var spec = $(this).attr("value");
  switch(spec) {
  case '1': $('#spec1').children(".li-description").slideDown( 150 ); break;
  case '2': $('#spec2').children(".li-description").slideDown( 150 ); break;
  case '3': $('#spec3').children(".li-description").slideDown( 150 ); break;
  case '4': $('#spec4').children(".li-description").slideDown( 150 ); break;
  case '5': $('#spec5').children(".li-description").slideDown( 150 ); break;
  case '6': $('#spec6').children(".li-description").slideDown( 150 ); break;
  case '7': $('#spec7').children(".li-description").slideDown( 150 ); break;
  case '8': $('#spec8').children(".li-description").slideDown( 150 ); break;
  case '9': $('#spec9').children(".li-description").slideDown( 150 ); break;
  }
 });
 return false;
});

Duas tentativas frustradas.. tem algo de errado com o código? é assim mesmo que precisa fazer?

Observação: tentei usar o mesmo switch com a página já carregada e o slideDown funciona.. Mas a inteção é que já abra o <ul> de ID correspondente à classe do botao clicado no sidebar. Isso tudo automaticamente logo após carregar a página...

[DiF]

Eu ainda não entendi direito, o porque que chamas o mesmo arquivo em todos os links.

Qual é o conteúdo do arquivo espec.php

dê um pouco mais de detalhes... pois a impressão que me dá é que estás dando uma volta enorme para carregar os dados...

[FelipeSAMA]

Vamo la...

O <ul> da pagina inicial é um sidebar com 9 <li>, cada uma com determinada especialização de odontologia.

Dentro do #espec.php teriam as respecticas especializações. Cada especialização ficaria dentro de uma <ul class="ul-spec"> e teria um ID correspondente com a classe de algum li no sidebar.

Esses Ul tem o nome do especialização, descrição e mais o nomes dos médicos que atuam na área.

Antes eu tinha deixado uma página pra cada especialização, mas resolvi colocar todas na mesma, fica mais interessante, não só pelo design, economiza páginas.

Inicialmente cada uma teria display none, por isso que ao clicar no <li> sidebar, carrega a #espec.php (especializações) e ainda da slideDown (mostra o conteudo) da especialização escolhida.

ex ->

<li .spec1 > slideDown <ul #spec1>

<li .spec2 > slideDown <ul #spec2>

<li .spec3 > slideDown <ul #spec3>

assim por diante...

[DiF]

Estou pensando aqui...

se você não vai usar o php para resgatar os dados de um banco de dados... não tem muito sentido você criar uma pagina php só para ter os dados ali.

você pode colocar tudo em uma lista ordenada....

Creio que seja este o seu objetivo:

http://jsfiddle.net/heE6J/25/

Veja que é mais simples do que imagina.

[FelipeSAMA]

mas foi exatamente isso que eu ja tinha feito, so tentei abrir automaticamente a lista clicada ao carregar a pagina, mas se você está dizendo que é muito complexo, talvez não seja necessário complicar tanto.Vou tentar mais aqui, se conseguir eu posto.