Ir ao conteúdo
  • Cadastre-se
FelipeSAMA

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

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 :o

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×