0

I am using masonry + infinite scroll but when I have to replace the content of a div with a HTML that comes from another ajax call the scroll stops working even tough the nav element is there.

So if the content comes when the page first loads the infinite scroll works but if in this page I replace the content of a div with an HTML that comes from an ajax call and contains the element the infinite scroll stops working.

Any idea

Here my code

$('#mainContainerHome').infinitescroll({
   navSelector  : '#page-nav',    // selector for the paged navigation
   nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
   itemSelector : '.tile',     // selector for all items you'll retrieve
   loading: {
     finishedMsg: 'No more items.',
     img: 'http://i.imgur.com/6RMhx.gif'
     }
   },
   // trigger Masonry as a callback
   function( newElements ) {
     // hide new items while they are loading
     var $newElems = $( newElements ).css({ opacity: 0 });
     // ensure that images load before adding to masonry layout
     $newElems.imagesLoaded(function(){
     // show elems now they're ready
     $newElems.animate({ opacity: 1 });
     $('#mainContainerHome').masonry( 'appended', $newElems, true );
   });
}
);

I need to have a way to tell infiniteScroll to start over and use the code that has been added via the jQuery..html('xxxxx'); statement.

Because after I replace the content of the div with a dynamic one (it contains the nav element) infinite scroll stops working.

bicatu
  • 105
  • 11

1 Answers1

0

I'm not familiar with these plugins, but right off I think I see something; try:

$('#mainContainerHome').append($newElems).masonry( 'appended', $newElems, true );
honyovk
  • 2,717
  • 18
  • 26