2

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.

enter image description here

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);

4 Answers 4

2

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);
5
  • Helps a lot but I get an error : ‘TypeError: EventEmitter is not a constructor ImagesLoaded.prototype = new EventEmitter();'. If you had any idea about this it would be wonderful.
    – Countzero
    Jun 21, 2013 at 14:31
  • Something was messed up with imagesloaded.js. Made it work with this version : gist.github.com/mohit-rocks/5660610
    – Countzero
    Jun 21, 2013 at 16:08
  • Great !!! Thanks a lot brother..It's my GIT account :) Jun 22, 2013 at 4:12
  • You're welcome. I still have a problem though : the last page keeps being loaded over and over again when I reach the end of the dataset. I never get the 'No more results found' message. Any idea ?
    – Countzero
    Jun 22, 2013 at 7:48
  • Don't have idea why it happens. Infact i was doing my free time, nowadays i am busy so get little time. Let's fix it together Jun 22, 2013 at 10:48
1

Why not use Infinite Scroll or Views Infinite Scroll?

1

You can easily use Views Infinite Scroll module.

Or combine Views Load More with Waypoints modules.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.