Continuous Scrolling With Jquery Waypoints

I am trying to follow this SO answer to create an infinite scrolling technique. In my example code, why is it not working? I would like to simulate that content be loaded each time

Solution 1:

I was wanting to do the same type of thing and ended switching from Waypoints to Bullseye:

http://pixeltango.com/resources/web-development/jquery-bullseye-viewport-detection-events/

So you could do something like this:

var myPageId = 1;
functiongetMore(e)
{
  for (var i=1; i<11; i++)
  {
    $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
  }
  myPageId++;
}

$('#waypoint').bind('enterviewport', getMore ).bullseye();

It will call your 'getMore' function every time the #waypoint element enters the viewport, so when it jumps down the page and then reenters you get a new callback!

Hope this helps.

Solution 2:

Managed to get this working. Thought i should share it here.

I used jQuery Waypoints 3.1.1

$(document).ready(function() {
    var pageId=0;
    var waypoint = newWaypoint({
        element: $("#waypoint"),
        handler: function(direction) {
            if (direction === 'down') {
                getMore(++pageId);
                Waypoint.refreshAll();
            }
        },
        offset: 'bottom-in-view'
    });

    functiongetMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }
    }
});

(1) Note the changes in instantiation of waypoint. (new Waypoint....)

(2) Call Waypoint.refreshAll() to refresh the waypoints after appended.

Hope it helps. Above code snippet is not tested, but theoretically should work.

Slay