modx getResources - offset/limit issue?

Question

I've set this up so that a main blog page displays an initial 3 posts, with tags when loaded fully.

            [[!getResourcesTag? 
                &element=`getResources` 
                &elementClass=`modSnippet`
                &tpl=`blog-item`
                &tplFirst=`blog-item-featured`
                &limit=`3`
                &hideContainers=`1` 
                &parents=`5` 
                &tagKey=`blog-tags`
                &includeTVs=`1`
                &tvPrefix=``
            ]]

The initial 3 posts displayed are sorted by date order on the main landing page (most recent first) e.g. Article 1, Article 2 & Article 3.

On clicking a "more posts" button underneath the 3 posts that are displayed, infinite scroll pagination (which has been set-up) kicks in.

<button class="load-more" data-parent="5" data-current-page="1">More Posts</button>

But when clicking on More Posts - Article 3 (again) & Article 4 are returned - instead of Article 4 & Article 5.

 $method   = $modx->getOption('method', $scriptProperties, 'initial');
 $limit    = $modx->getOption('limit', $scriptProperties, 3);
 $parent   = $modx->getOption('parent', $scriptProperties);
 $tpl      = $modx->getOption('tpl', $scriptProperties);
 $tplFirst = $modx->getOption('tplFirst', $scriptProperties);

 $load   = (int) $_GET['page'];
$offset = 0;

if($method == "initial") {
    if($load != 0) {
        $limit = $limit * $load;
    }
} elseif($method == "pagination") {
    $offset = $limit * ($load - 1);
}

$page = $modx->runSnippet('getResources', array(
    'parents'        => $parent,
    'limit'          => $limit,
    'offset'         => $offset,
    'includeTVs'     => '1',
    'tvPrefix'       => '',
    'includeContent' => '1',
    'tpl'            => $tpl,
    'tplFirst'       => $tplFirst
));

I've played about with parameters & tried altering the code that deals with offset but can't seem to figure it out.

Some help would be great.

Answer 1

UPDATED CODE ADDED

I did something similar a while back, almost exactly actually [must have googled it]

the only difference in my inital getResources call is I used an offset of 0

<div id="posts">
<!-- get first few articles -->
[[!getResources?
     &parents=`10,22`
     &depth=`999`
     &limit=`6`
     &offset=`0`
     &includeTVs=`1`
     &processTVs=`1`
     &includeContent=`1`
     &tpl=`infiniteHomePageTpl`
     &sortby=`publishedon`
     &showHidden=`1`
     &hideContainers=`1`
]]

</div>

<button id="scroller" class="btn btn-primary load-more" data-parents="10,22" data-offset="6" data-posts="3">Show More Articles</button>
<button id="scolltotop" class="btn btn-primary scrollToTop" style="display:none;">Back to Top</button>

Just for Brevity, here is the snippet and js:

<?php
    $output = array(
      'status' => 'success',
      'msg' => 'message',
      'data' => 'blaaaaaaaah',
      'lastpost' => FALSE,
    );

    $properties = $scriptProperties['data'];

    $modx->log(modX::LOG_LEVEL_ERROR,'Running processor: ajax.generic, scriptProperties = '. print_r($properties, TRUE));

    $limit  = $properties['limit'];
    $parents = $properties['parents'];
    $tpl    = $properties['tpl'];
    $offset = $properties['offset'];
    $depth = $properties['depth'];
    $sortby = $properties['sortby'];
    $debug = $properties['debug'];
    $showHidden = $properties['showHidden'];
    $hideContainers = $properties['hideContainers'];

    $modx->log(modX::LOG_LEVEL_ERROR, 'tpl = ' . $tpl);

    $posts = $modx->runSnippet('getResources', array(
        'parents'       => $parents,
        'depth'         => $depth,
        'limit'         => $limit,
        'offset'        => $offset,
        'includeTVs'    => '1',
        'processTVs'    => '1',
        'includeContent' => '1',
        'tpl'           => $tpl,
        'debug'         => $debug,
        'sortby'        => $sortby,
        'showHidden'    => $showHidden,
        'hideContainers'=> $hideContainers,
    ));

   $output['posts'] = '<div class="post-group" style="display:none" >' . $posts . '</div>';

   if(strlen($posts) == 0){

   $output['lastpost'] = TRUE;

   }

   $output = $modx->toJSON($output);

    return $output;

and the JS:

// infinite scrolling on homepage
    // use: <button id="scroller" class="btn btn-primary load-more" data-parents="10,22" data-offset="0" data-posts="5">Show More Articles</button>
    $('.load-more').click(function(e) {

        var $this = $(this);

        var offset = $this.data('offset'); // the current offset for get resources

        var posts = $this.data('posts'); // the number of posts to get

        var parents = $this.data('parents'); // the parent ids to pull resources from

        var myProperties = {
            snippet: 'infiniteScroll',
            limit: posts,
            offset: offset,
            parents: parents,
            depth: 999,
            sortby: 'publishedon',
            showHidden: 1,
            debug: 1,
            tpl: 'infiniteHomePageTpl',
            hideContainers: 1
            };
console.log('props = ' + JSON.stringify(myProperties));
        $.ajax({
            type: "POST",
            url: "/ajax.processor",
            data: myProperties,
            dataType: "json",

            success: function(response) {

                var newposts = response.posts;

                var $div = $("div#posts");

                $div.append(newposts);

                $div.find(".post-group:last").fadeIn();

                $('body').stop().animate({scrollTop:$div.prop("scrollHeight") + $div.height()},1000);

                if(response.lastpost){
                    console.log('nodata');
                    $this.attr('disabled', 'disabled');
                    $this.html('no more posts');
                    $('.scrollToTop').show();
                }

                $this.data('offset', (offset + posts));

            },

            error: function(response){
                console.log(response);
            },

        }).fail(function(jqXHR,textStatus,errorThrown) {
            console.log(errorThrown);
        }); // ajax

    }); // load more

    // scroll back to top on finished resources.

    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

Ajax Processor

<?php
//$modx->log(modX::LOG_LEVEL_ERROR,'Running processor: ajax.generic, snippet = '. print_r($_POST, TRUE));

$output = $modx->runSnippet($_POST['snippet'], array('data' => $_POST));

header('Content-type: application/json');

return $output;