Dynamic $page->next for infinite scroll

[vadimmil]

Hi!

I'm trying to implement infinite scroll (https://infinite-scroll.com) on my news site in development. I've done the main job, but here is the problem: I can get only one next page, using $page->next. The structure of the code is:

In DOM:

<p class="pagination">
                    <a class="pagination__next" href="<?php
                    $next_page = $page->next;
                    echo "$next_page->url";
                    ?>"></a>
                </p>

in Jquery:

$('.article-feed').infiniteScroll({
    checkLastPage: true,
    path: '.pagination__next',
    append: '.article',
    hideNav: '.pagination__next',
    history: 'push',
    historyTitle: true,
    debug: true
});

So Jquery takes url from DOM element with the class .pagination__next. Then it loads the page with this url. But after that it stuck, because on page 2 of infinite scroll the $page->next method returns the same url. I understand, that I should somehow get the url from $page->next method dynamically, but I just don't know how to do it.

Yeah, I know, 'don't do infinite scroll, if your don't know how to', but, may be, someone can give me any hints?

[tpr]

Recently when I added a similar feature I grabbed the div containing the Next link too from the next page, so I got always the updated link (I used no plugins).

[vadimmil]

Tnanks for your reply! But can you be a little more specific about "I grabbed the div containing the Next link too from the next page". You grab it with JavaScript?

[tpr]

Yes, I grabbed the parent div of the articles div that contained the prev-next links too. This way the Load more button could trigger the right Next link.

I can share the jQuery snippet though it's WP-specific and currently has no history feature. Plus the Load more needs manual click so you'd have to implement a check on scroll if you need it to automatically load next posts.