I have infinite ajax scroll running in a silverstripe website. Also I have "NoneLeft" Extension running to let people know, they reached the bottom.
The IAScroll is showing ArticlePages in a ArticleHolder page and displaying the "NoneLeft" text as it should. Now, when I show only an ArticlePage directly (without ArticleHolder around) it is also showing the "NoneLeft" Text. Is there any way to switch it off or limiting to a certain page? Or do I have to unbind ias from jQuery? Thx a lot
Silverstripe ArticleHolder.php
<?php
class ArticleHolder extends Page {
private static $allowed_children = array('ArticlePage');
}
class ArticleHolder_Controller extends Page_Controller {
public function PaginatedArticles(){
$paginatedItems = new PaginatedList(ArticlePage::get()->sort("Date DESC"), $this->request);
$paginatedItems->setPageLength(4);
return $paginatedItems;
}
}
script.js
var ias = jQuery.ias({
container: '#posts',
item: '.post',
pagination: '#pagination',
next: '.next',
delay: 0,
negativeMargin: 250,
history: true; }
});
// Adds a text when there are no more pages left to load
ias.extension(new IASNoneLeftExtension({
text: "You reached the end"
}));
the html output of #pagination, when several posts are present
<div id="pagination" class="line" style="display: none;">
<div class="unit size1of4 lineLeftRight lineLeft">
<p></p>
</div>
<div class="unit size1of4 lineLeftRight lineLeft">
<p> …
<a class="next" href="?start=4"> Next
</a>
</p>
</div>
<div class="unit size1of4 lastUnit lineLeftRight lineRight">
<p></p>
</div>
</div>
when there is only one article, there is no #pagination but again the "NoneLeft" text
<div id="ias_noneleft_1403162234904" class="ias-noneleft line">
<div class="unit size1of4 lineLeftRight lineLeft">
<p></p>
</div>
<div class="unit size2of4 lineMiddle">
<p>
You reached the end
</p>
</div>
<div class="unit size1of4 lastUnit lineLeftRight lineRight">
<p></p>
</div>
</div>
Alright, I found it.
When displaying a single ArticlePage, I still had a div with class .post
around the article.
<div class="post line">
// the article
</div>
as soon as infinite ajax scroll sees the .post div, it adds the noneLeft text.
Moving the .post class div
into the loop of ArticleHolder helped.
ArticleHolder.ss
<div id="posts" class="line">
<% loop $PaginatedArticles %>
<div class="post line">
<% include ArticlePage %>
</div>
<% end_loop %>
</div>