Infinite scroll pager in Drupal 7 I want to add infinite scroll page in search result pages. I am using Drupal 7.

To achieve it i followed this link.

When i do exactly as per the step given on this page, but i am not able to get it working.

Here is the HTML generated on my search result page.



Now to apply the pager in this page i made the following changes in the scripts given in the above link.


Remove .autopager class as i will have to add .pager class 
Remove the imagesLoaded function as there are no images in the result


So after removal js will be like this. In his code i have added the .pager class. I am not able to get the pager and what should i write instead of viewsInfiniteScroll

   (function ($) {
  Drupal.behaviors.viewsInfiniteScroll = {
    attach: function (context, settings) {
      $(function(){
        var $container = $('div.pager');
      });
    }
  };
})(jQuery);
After lots of brainstorming and googling one user Marc from drupal.org suggested me the working solutions. Thanks to Marc for the solution.

Here is the solution:

To set it up, you will need a couple of steps:
REM: This method don't use the "Infinite Scroll Module", it's a rewrite of the stuff. In this method I choosed to integrate it in the theme, you could also create your own module (wish would be probably better .... )

1) download https://github.com/desandro/imagesloaded (jquery.imagesloaded.min.js) place it in your theme folder YOURTHEME/js
This will make sure all images are loaded before activate the infinite scroll

2) download https://github.com/paulirish/infinite-scroll (jquery.infinitescroll.min.js) place it in your theme folder YOURTHEME/js
In order to make it work with Drupal search modify it as follow: Search match(/^(.*?page=)2(\/.*|$)/ replace it by match(/^(.*?page=)2(&amp;.*|$)

3) Create a new js (ex:infinitescroll.js) with the content of the below jquery &amp; place it in your theme folder YOURTHEME/js
Rem: You will probably have to change the img path

4) modify YOUR_THEME.info and add


scripts[] = js/jquery.imagesloaded.min.js
scripts[] = js/jquery.infinitescroll.min.js
scripts[] = js/infinitescroll.js


5) flush the cache

6) cross finger &amp; try .... it should work if not ... it's time to debug with firebug ...

Jquery code which you should place in infinitescroll.js

(function($){
    Drupal.behaviors.viewsInfiniteScroll = {
            attach: function (context, settings) {
              $(function(){
                if (this.processed) return;
                this.processed=true;
                if ($('.search-results').length==0) return;
                var $container = $('.search-results');
                $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 : '.search-results',     // selector for all items you'll retrieve
                    animate      : true,
                    msgText  : Drupal.t("Loading new results..."),
                    img: '/sites/default/themes/bartik/images/ajax-loader.gif',
                    donetext:Drupal.t('No more results to load.'),
                },function(arrayOfNewElems,state){
                    //YOUR CALLBACK STUFF .. To re-attach behaviour if needed

                    })
            })
          });
          }
        };
})(jQuery);