Slider in jQuery (Nivo Slider) does not work when it is inside a content loaded via Ajax

Asked

Viewed 1,241 times

1

I’m using the Nivo Slider plugin to create a slider on my page. If I put the slider structure directly on the page, it loads right... but if it is inside a content loaded via ajax, just nothing appears.

What can it be? The funny thing is that lighbox works, but the slider doesn’t...

I use it to load the slider:

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

And that’s what I call my ajax content:

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

jquery ajax slider

  • I don’t know if it’ll solve your problem, but I’ve been through something like this. I was told that loading Ajax does not load the Jquery scripts, so a possible solution is you put the scripts in the initial page loading (At least with me it works)

  • it is, the big problem is just this: I load EVERYTHING on the home page, inside the ajax is only the div with the content of the slider... if I put the same div of the slider OUT of the load via ajax, ie, directly in the index, everything goes well.

  • You use the WAMP SERVER?

  • No, locally I develop with shaman.

  • Here is a project of mine that I use lightbox and ajax loading, maybe it helps you. The INDEX page ta with ajax loading and lightbox and the WMIN page is loaded, look at the ajax loading scripts, it might help you.. http://www.4shared.com/rar/lwgAYTvqba/projeto01.html

3 answers

1

Place slide instance after ajax loading:

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

  • Kadu, I think that’s almost it, but somewhere, I missed adding the js/ideal-image-slider.js file src

  • It is not added in head of your page, <script src="js/ideal-image-slider.js"></script>?

  • Before he gave the direct load in the function, but I put in the head and did not solve... when I use this code there, even what worked in the home (outside ajax content), stop working :(

  • I updated the code there, if you still can’t get it, put your code in the Jsfiddle so we can see what’s wrong...

  • So, now with this new code, the slider I put to the Homepage (without ajax) works normally... but unfortunately, the one that comes loaded along with the ajax content still doesn’t work... I think there is some bullshit between Ajax vs Jquery that should be solved with some sort of gambiarra, like the one from the 'Delegate' that Ricardo posted above... the problem is that I have no idea how to use it :(

  • I put a link to demo there, give a look and anything if you still can not create one with your code to see what is happening...

  • So... this I was able to do, put the slider to work on the home. The problem only occurs when I load the content where the slider comes via ajax. Try the following: Replace the contents '<div class="entry-content"> <div class="slider-wrapper Theme-default"> <div class="Ribbon"></div> <div id="nivoslider" class="nivoSlider"></div> </div>' by: '<div id="ajaxLoader"></div>' . This is what happens to me. If it is pure, at home, legal funnel. If it comes via ajax, it does not work.

  • Made and worked.... DEMO

Show 3 more comments

0

Brother, the DOM is dynamic, always remember that. You need to trigger nivoslider only after loading the content in your div... There, where you are, you’re telling jquery, when you finish loading the page, do it with this div, and that’s not what you want.

You want that when the div is loaded with your objects coming from ajax will be triggered the nivoslider.

-1

I think you need to use the delegate: http://api.jquery.com/delegate/ It has happened to me before, but with the click, that after loading a page via AJAX it stopped working...

  • Thank you comrade, I will study this possibility as well and, if it works, put here. Edit: I took a look but, I’m still very beginner when it comes to dev... what exactly I would do with this delegate'?

  • Note that I have never used nivoSlider (so I don’t know if this will work, but where you have: $('#slider'). nivoSlider(); tries to meter $("#content-ventures"). delegate("#slider", "nivoSlider"); As I said, I’ve never worked with nivoSlider, so I don’t know if this will work!

  • Yeah, it’s still not working... with this code there, even at home it stops working :(

Browser other questions tagged jquery ajax slider

You are not signed in. Login or sign up in order to post.