CODEWITHSUNDEEP
jquerydrupalpaginationscrollinfinite
Anthony Vz
Anthony Vz

Reputation: 41

Infinite Scroll on Drupal pagination skipping second page

I have a Drupal site, the homepage is a view of all site content. It is paginated and I am using the Masonry and Infinite Scroll jQuery plugins.

The first page loads fine, and when you scroll down it does seem to work as it should. However, it's actually skipping right over the second page of content (page 2 in the pager links). And I can't seem to figure out why.

When the page first loads, if you DON'T SCROLL, you can hover over the pagination and see the URL each link points to. When I run the site in firebug, the AJAX is actually loading what would be Page 3 in the pagination as the first page, and skips right over Page 2.

See the page here http://ninja.oncommunication.ca/

Is it because Drupal is starting with page 0 in it's pagination? I would think that the Infinte Scroll plug-in just reads the URL from the "next" link, but it obviously doesn't because that link is pointing to Page=1 (which is the second page in pagination), but when you scroll down, the first page loaded is Page=2 (which is the third page in pagination)

Any help??

Upvotes: 4

Views: 2204

Answers (2)

Gokul N K
Gokul N K

Reputation: 2458

Did you consider using View Infinite Scroll module for the same?

Upvotes: 0

facultymatt
facultymatt

Reputation: 169

I've had similar issues before, try setting the currentPage option when initializing infinatescroll, like this:

note that all you need is currPage: 1 but I have included a full set of options because I find that the options and subsets of more options tend to get confusing.

Try playing with this number too, maybe 0 or 2 would work? Basically you are telling infinateScroll which page you are starting on because sometimes it can't quite figure it out based on the next link. 

    // initialize scroller
    $('.infinateScroll').find('ul:first').infinitescroll({

        // setup scroller options
        navSelector  : ".pager",            
        nextSelector : ".pager > li.next > a",    
        itemSelector : ".infinateScrollItem",
        debug        : false,
        animate         : false,
        loading: {
            finished: function() {},
            finishedMsg: "<p>No More to Load!</p>",
            msg: null,
            msgText: "<p>Loading&hellip;</p>",
            selector: null,
            speed: 'fast',
            start: undefined
        },
        state: {
            isDuringAjax: false,
            isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1
        },
        bufferPx: 300 // ideal setting 300     

    }

Upvotes: 1

Related Questions