How to supply data to Infinite Ajax Scroll plugin?

Question

I'm using Infinite AJAX Scroll plugin.

I've read the doc on the website and seen quite a few questions on SO about it, I think I understand that content is loaded thanks to the URL changing when scrolling. With the following snippet, it seems to work pretty well for loading the second page.

<div id="container">

    {% for post in posts %}
        <div class="post" style="height: 250px; background-color: rgba(0,0,0,0.2)">{{ post.title }}</div>
    {% endfor %}

</div>

<div id="pagination">
    <a href="" class="prev">prev</a>
    <a href="/posts/2" class="next">next</a>
</div>

Js part:

<script type="text/javascript">
    var ias = jQuery.ias({
        container:  '#container',
        item:       '.post',
        pagination: '#pagination',
        next:       '#pagination a.next',
    });

    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASTriggerExtension({offset: 10}));
    ias.extension(new IASPagingExtension());
    ias.extension(new IASHistoryExtension({prev: '#pagination a.prev'}));

    ias.on('loaded', function () {
        let href = $('a.next').attr('href');
        $('a.next').attr('href', '/posts/' + (parseInt(href.split('/')[2]) + 1));
    });
</script>

However, the href is not updated, so do I have to make a function to update to /posts/3 once /posts/2 is loaded, etc ? Seems a bit disappointing that it is not made automatically.

Anyway, I've made it and it works (it's the last four lines of the script), but the plugin still doesn't load page 3, it just stops at the end of page 2, not even displaying loading gif. Does anyone have a clue about how to make this plugin work ? (or a better plugin, SEO friendly if possible ?)

Php side is okay, I've tested it without IAS on.

Answer 1

try:

var page = 0;
$(window).scroll(function(){
    if ( $(window).scrollTop() + $(window).height() == $document().height() ) {
        page++;
        ajax(page);
    }
})

function _ajax(page){
 // coce     
}