16

I have a custom block view. I display the last 5 node titles. If someone clicks the more link I want to load the next 5 titles underneath the current 5 node titles. No page refresh and not pager. Is this possible? How would I go about doing this?

2
  • I don't have a solution but here are a couple links that might help. Drupal Datasource and Drupal & Ajax, dynamically update a drupal display. which outputs views as JSON. This Lullabot tutorial shows how to use jQuery in Drupal. You can look at the download code for example of how to implement it if you don't want to buy the video.
    – Adam S
    Jun 10 '11 at 18:29
  • Views infinite scroll for Drupal 8 doesn't need any external library, requests only the content it needs, has support for exposed filters and can work automatically or with the push of a button.
    – Sam152
    Feb 5 '16 at 1:55
29

So this is one of those problems that multiple people in the drupal world have tried to solve.

I recently gave a presentation on this exact same issue and how to accomplish it with drupal. Sadly I never posted any of my slides up anywhere where the rest of the world can see.

Here's the Break down of modules:

Views Infinite Scroll

  • Does Not work with Views Ajax support -- It hacks around it to make is own ajax request
  • Makes a full page request -- This is because it doesn't use the Views Ajax request
  • Requires Views 3.x -- This is a plus, because the pager is plug-able in 3.x

Views Infinite Pager

  • Support Views 2.x -- This is really not a good thing, because the pager isn't plug-able
  • Because it works with 2.x it really hacks around the pager theme, the regular views ajax, and preprocessing behavior. So it breaks some functionality.

And last but not least is a new project in which I just added in light of this question. The reason for the project is my need for also needing views that support load more except the issues mention above we're not acceptable for my project.

Views load More

  • Requires Views 3.x - This is on purpose.
  • Support views regular pager options, such as offsets, page count
  • Fully supports views ajax feature
    • If Ajax is enabled on the view, the load more will add content to the bottom of the list
    • If ajax is disable the page will refresh and replace the old content with the new content
    • It does not do a full page request when doing the ajax callback, it lets views do is natural callback and instead of replacing the content it appends to it.
  • If you're using the waypoint module the view can be configured to automatically get new content when the user scrolls to the bottom of the page.
  • Supports JQuery effects (right now only the fade effect is supported, more soon to come).

Hope this answers your question. This is my "unbiased" ;-) opinion on all the views load more module.

3
  • Went with Views Infinite Pager as we are on views 2. Will try and get our project to move up to views 3.
    – Lucy
    Jun 14 '11 at 11:54
  • I made some changes to the answer in order to reflect the new features added to views_load_more and also to remove all reference to the sandbox project since this is now a fully supported project on drupal.org
    – ericduran
    Aug 28 '11 at 4:14
  • Left a comment re: VIS in D8 on the question thread ^
    – Sam152
    Feb 5 '16 at 1:55
2

Another method using https://github.com/paulirish/infinite-scroll in Drupal is Transform any Drupal pager into an autopager - infinite scroll pager - load more pager.

Step 1

Download jquery.infinitescroll.min.js from https://github.com/paulirish/infinite-scroll and put it in /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Step 2

Add the JavaScript file to the .info file of your theme.

Step 3

Make a custom JavaScript file /sites/all/themes/YOURTHEME/js/YOURTHEME.js containing the following code.

/**
 * Implementation of autopager @see https://github.com/paulirish/infinite-scroll
 * All views that have the "autopager" class will have an autopager
 */
Drupal.behaviors.viewsInfiniteScroll = function(context) {
  $(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: '/sites/all/themes/YOURTHEME/images/loading.gif'
        }
      })
    })
  });
}

Step 4

Add the CSS of the infinite scroll loader

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 300px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Step 5

Make sure jquery version is newer than 1.7.1. Use one of the methods described in http://drupal.org/node/1058168 for installing a newer version of jQuery in Drupal.

1

I cannot add a comment on the first answer. But you should add the new module : https://www.drupal.org/project/gd_infinite_scroll This module let your transform any content and pager to an infinite scroll or a load more pager.

From the page of the module:

Provide an administration to use the infinite scroll jQuery plugin : auto-pager on custom pages using pager. You can use autoload on scroll or a load more button.

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.