Load more content with ajax when clicking more link in a view

Question

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?

Answer 1

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.

Answer 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.

Answer 3

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.