1

Estou utilizando o plugin Nivo Slider para criar um slider na minha página. Se eu colocar a estrutura do slider diretamente na página, ele carrega certinho... mas se estiver dentro de um conteúdo carregado via ajax, simplesmente não aparece nada.

O que pode ser? O engraçado é que o lighbox funciona, mas o slider não...

Eu uso isso pra carregar o slider:

<script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
</script>

E é assim que eu chamo meu conteúdo ajax:

<script type="text/javascript">
       function startEmpreendimento(e) {
           e.preventDefault();
           var href = "<?php echo $primeiroID; ?>";
           $("#content-empreendimentos").load(href + " #content-empreendimentos");
        }           
       window.onload=startEmpreendimento;        

5
  • Não sei se vai resolver seu problema, mas eu já passei por algo parecido. Me disseram que o carregamento Ajax não carrega os scripts Jquery, então uma possível solução é você colocar os scripts no carregamento da pagina inicial (Pelo menos comigo funciono) Commented 9/10/2014 às 2:21
  • pois é, o grande problema é justamente esse: eu carrego TUDO na página inicial, dentro do ajax está somente a div com o conteúdo do slider... se eu coloco a mesmíssima div do slider FORA do carregamento via ajax, ou seja, diretamente na index, tudo corre bem. Commented 9/10/2014 às 2:40
  • Você usa o WAMP SERVER? Commented 9/10/2014 às 2:48
  • Não, localmente desenvolvo com o xampp. Commented 9/10/2014 às 2:49
  • ta aqui um projeto meu que uso lightbox e carregamento ajax, talvez te ajude. A pagina INDEX ta com o carregamento ajax e o lightbox e a pagina WMIN é carregada, olha os scripts de carregamento ajax, talvez te ajude.. 4shared.com/rar/lwgAYTvqba/projeto01.html Commented 9/10/2014 às 2:55

3 Respostas 3

1

Coloca a instância do slide após o carregamento do ajax:

<!DOCTYPE html>
<head>
<!-- Adicione todos os importes necessários -->
<script src="js/ideal-image-slider.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) { // Essa função será executada quando a página carregar
      var href = "<?php echo $primeiroID; ?>";

      $("#content-empreendimentos").load(href + " #content-empreendimentos", function(){
         // Esse código será executado quando o load terminar
         $('#slider').nivoSlider();
      });

   });
</script>
</head>
<body>
   <div id="slider">...</div>
</body>
</html>

DEMO

8
  • Kadu, acho que é quase isso, mas em algum lugar, faltou adicionar o src do arquivo js/ideal-image-slider.js Commented 9/10/2014 às 15:07
  • Ele não está adicionado no head da sua página, <script src="js/ideal-image-slider.js"></script>?
    – KaduAmaral
    Commented 9/10/2014 às 16:44
  • Antes ele dava o load direto na função, mas coloquei no head e não resolveu... quando usso esse código aí, até mesmo o que funcionava na home (fora do conteúdo ajax), para de funcionar :( Commented 9/10/2014 às 19:22
  • Atualizei o código ali, se mesmo assim não estiver conseguindo, coloque seu código no JSFiddle pra gente ver o que está acontecendo de errado...
    – KaduAmaral
    Commented 9/10/2014 às 19:31
  • Então, agora com esse novo código, o slider que coloquei de teste na Homepage (sem o ajax) funciona normalmente... mas infelizmente, o que vem carregado junto com o conteúdo ajax continua a não funcionar... Acho que existe alguma treta entre Ajax vs Jquery que deve ser resolvida com algum tipo de gambiarra, como o tal do 'Delegate' que o Ricardo postou acima... o problema é que eu não tenho nem ideia de como usar isso :( Commented 9/10/2014 às 19:57
0

Brother, o DOM é dinâmico, lembre-se disso sempre. Você precisa acionar o nivoslider somente após carregado o conteúdo em sua div... Alí, onde está, você está dizendo ao jquery, ao terminar de carregar a página, faça isso com esse div, e não é isso que você quer.

Você quer que quando o div for carregado com seus objetos vindos do ajax será acionado o nivoslider.

-1

Creio que precisas de utilizar o delegate: http://api.jquery.com/delegate/ Já me aconteceu outras vezes, mas com o click, que depois de carregar uma página via AJAX ele deixava de funcionar...

3
  • Obrigado camarada, vou estudar essa possibilidade também e, se funcionar, posto aqui. Edit: dei uma olhada mas, ainda sou muito iniciante no que diz respeito à dev... o que exatamente eu faria com esse 'delegate'? Commented 9/10/2014 às 15:08
  • De notar que eu nunca usei o nivoSlider (por isso não sei se isto vai funcionar, mas onde tens: $('#slider').nivoSlider(); tenta meter $("#content-empreendimentos").delegate("#slider", "nivoSlider"); Como disse nunca trabalhei com o nivoSlider, por isso não sei se isso vai funcionar! Commented 10/10/2014 às 18:34
  • É, continua não funcionando... com este código aí, até na Home para de funcionar :( Commented 13/10/2014 às 18:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .