jQuery response fragment, using jScroll

[csdude55]

I'm using jScroll to set up infinite scrolling on a page. Here is the (basic) jScroll documentation:

[jscroll.com...]

The concept is fairly simple; I define a section like this:

<div class="scroll">
 <div id="itemList">
 ...
 </div>

 <a href="$next_link" class="next" style="display: none">next</a>
</div>

<script>
$('.scroll').jscroll({
 padding: 100,
 nextSelector: 'a.next:last',
 contentSelector: '#itemList'
});
</script>

When I scroll to the bottom of scroll it will load the itemList section that's found on the link specified by the "next" class.

My PHP looks more like this:

echo <<<EOF
<div class="scroll">
 <div id="itemList">

EOF;

// Define Page
if (is_numeric($_GET['s'])) $start = $_GET['s'];
else $start = 0;

$end = $start + 25;

for ($i = $start; $i < $end; $i++) {
 // do whatever
}

$next_link = $home . '?s=$end';

echo <<<EOF
 </div>

 <a href="$next_link" class="next" style="display: none">next</a>
</div>

<script>
$('.scroll').jscroll({
 padding: 100,
 nextSelector: 'a.next:last',
 contentSelector: '#itemList'
});
</script>

EOF;

The problem I'm having is that it will autoload the 2nd page (the first link that's defined before the jScroll is accessed), but it doesn't do a 3rd, 4th, etc. And I can't figure out whether $next_link is not being created, or if the script isn't finding it (maybe related to the :last in nextSelector?).

Any thoughts?

[csdude55]

Nevermind, I think I figured it out :-)

There were 2 things wrong:

1. I had to move $next_link inside of the itemList container; and

2. I had to move the "next" class to a DIV outside of the anchor, and then modify the jScroll configuration:

// Including this for posterity
<script src="//cdn.jsdelivr.net/jquery.jscroll/2.2.4/jquery.jscroll.min.js"></script>

<div class="scroll">
 <div id="itemList">
  ...
  <div class="next"><a href="$next_link">next</a></div>
 </div>
</div>

<script>
$('.scroll').jscroll({
 padding: 100,
 nextSelector: '.next > a:last',
 contentSelector: '#itemList'
});
</script>

It also turned out that it wasn't necessary to use display: none on the anchor, I guess jScroll does that automatically. But I may need to modify the link to be prettier as a fallback for non-JS browsers.

Oh, the pains of figuring out somebody else's marginally-documented work! lol But maybe this will help somebody else.