I'm running into a bit of a snag:

If I set a value for items per page in the views pager, I get the loading animation, however it returns with "No More Pages to load" even if there are.

If I set a value of 0 for the items per page, I don't get any animation at all.

Something I missed?

Hi All,

What should i change in the Drupal 7 code given below to make it work with search result page.
I have html structure is given like this . I don't know where should i change to work with search result page..

(function ($) {

  Drupal.behaviors.viewsInfiniteScroll = {
    attach: function (context, settings) {
      $(function(){

        var $container = $('div.autopager div.view-content');

        $container.imagesLoaded( function(){
          $container.infinitescroll({
            navSelector  : 'div.autopager .pager',    // selector for the paged navigation
            nextSelector : 'div.autopager .pager-next a',  // selector for the NEXT link (to page 2)
            itemSelector : 'div.autopager .views-row',     // selector for all items you'll retrieve
            loading: {
              finishedMsg: 'No more pages to load.',
              img: Drupal.settings.basePath + 'sites/all/themes/YOURTHEME/images/loading.gif'
            }
        })
    })
  });
  }
};

})(jQuery);

I couldn't get this to work on a simple pager, built calling the pager theme.

By the way, the official demo of infinite scroll's jquery plugin doesn't work either.

For some reason, the information on site is outdated. If you want to load more content on click:
https://github.com/paulirish/infinite-scroll/issues/204#issuecomment-747...

So I read, and reread, and then pulled my hair out over this entry. When I finally got down and dirty with the infinite-scroll code, I realized that it was assuming that the first page had an index of 1 (which in Drupal it doesn't,) and didn't seem to be calculating the last page very well. So here is my implementation that works for Drupal default pager (not Views):

Drupal.behaviors.mysiteInfiniteScroll = {
    attach: function (context, settings) {
      $('div.item-list .pager:not(.mysite-scroll-processed)', context).each(function(){
		if($('#zone-content-wrapper div.item-list .pager:not(.mysite-scroll-processed) .pager-next').length == 0) return;
		
               // Determine the Last Page
		var $max_page = $('div.item-list li.pager-last > a').attr('href').substring($('div.item-list li.pager-last > a').attr('href').lastIndexOf("page=")+5);
               // Determine the Current Page
		var $curr_page = $('div.item-list li.pager-next > a').attr('href').substring($('div.item-list li.pager-next > a').attr('href').lastIndexOf("page=")+5) - 1;
		
                $('#zone-content-wrapper #block-system-main div.block-inner > div.content').infinitescroll({
			navSelector  : 'div.item-list ul.pager',    // selector for the paged navigation
                        nextSelector : 'div.item-list li.pager-next > a',  // selector for the NEXT link (to page 2)
                        itemSelector : '#block-system-main .node',     // selector for all items you'll retrieve
                        loading: {
                                finishedMsg: 'No more pages to load.',
                                img: Drupal.settings.basePath + 'sites/all/themes/mysite/Images/temp_loader.gif'
                        },
			bufferPx     : 650, // my own default pixel buffer
			donetext     : Drupal.t('No more results to load.'),
			maxPage      : $max_page, // calculated above
			state: {
				currPage : $curr_page // calculated above
			},
                   },function(arrayOfNewElems){
		        Drupal.attachBehaviors($(this));	
		});
		
		$(this).addClass('mysite-scroll-processed');
  	});
  }
};

This could probably use some cleaning up, and would greatly take suggestions. Also, I'm using jQuery 1.8 (using jQuery Update module). Hope this help any of you struggling to make this work outside of Views.

For custom coded page I have created own version for replacing drupal pager with "read more" AJAX functionality: (works without infinite-scroll plugin)

(function ($) {
  Drupal.behaviors.readMoreAjax = {
    attach: function (context, settings) {
      $('.read-more-ajax', context).click(function () {
        var nextPage = $('.pager .pager-next a').attr('href');
        var lastPage = $('.pager .pager-last a').attr('href');
        $.get(nextPage, function (data) {
          $(data).find('.produktlist').insertBefore($('.item-list'));
          $('.item-list .pager').remove();
          if (nextPage == lastPage) {
            $('.read-more-ajax').remove();
          }
          else {
            $(data).find('.item-list .pager').appendTo($('.item-list'));
            Drupal.attachBehaviors($('.item-list'));
          }
        });
      });
      $('.item-list .pager').hide();
    }
  };
})(jQuery);

Where:

• '.read-more-ajax' - button to load more
• '.produktlist' - nodes/divs that should be loaded

The Views Pager starts at 0, not 1. So when the infinite-scroll.js lib looks for a page 2 it gets a 404.

Add this to your defaults and voila!

state: {currPage: 0}

Here's my entire code snippet, including support for masonry if anyone is interested:

(function($){
	Drupal.behaviors.viewsInfiniteScroll = {
		    attach: function (context, settings) {
		      $(function(){
		    	if (this.processed) return;
		    	this.processed=true;
		    	if ($('.blist-inside').length==0) return;
		        var $container = $('.blist-inside');
		
				// setup masonry
			  	$container.imagesLoaded(function($){
			    	$container.masonry({
			      		itemSelector: 'div.pmason',
			      		columnWidth: 320
			    	});
			  		}(jQuery));
		
		        $container.imagesLoaded( function(){
		          $container.infinitescroll({
		            navSelector  : 'ul.pager',    // selector for the paged navigation
		            nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
		            itemSelector : 'div.pmason',     // selector for all items you'll retrieve
		            animate      : true,
		            msgText  : Drupal.t("Loading new results..."),
		            img: '/sites/default/themes/sq/img/loading.gif',
		            donetext:Drupal.t('No more results to load.'),
		
					state: {
					            currPage: 0
					        },
				// call back for masonry
		        },function(arrayOfNewElems,state){
		        	// hide new items while they are loading
			      var $newElems = $( arrayOfNewElems ).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 });
			        $container.masonry( 'appended', $newElems, true ); 
				    });
		          })
		    })
		  });
		  }
		};
})(jQuery);

In order to get it working don't forget Add views row classes have checked (in Views format settings),
since the itemSelector in the example uses .views-row class

For anyone that comes to this page, there is a module that already does this:

https://www.drupal.org/project/gd_infinite_scroll

The js used in this tutorial is not longer mantained.