Infinite scroll pager in Drupal 7

Question

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.

1. Remove .autopager class as i will have to add .pager class
2. 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);

Answer 1

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(&.*|$)

3) Create a new js (ex:infinitescroll.js) with the content of the below jquery & 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 & 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);

Answer 2

Why not use Infinite Scroll or Views Infinite Scroll?

Answer 3

You can easily use Views Infinite Scroll module.

Or combine Views Load More with Waypoints modules.

Answer 4

You can use the GD Infinite Scroll module to add infinite scroll or load more button on non-view paged list, can also work with views.

Provide an administration to use the infinite scroll jQuery plugin : auto-pager on custom pages using drupal pager.