Silvestripe + Infinite Ajax Scroll: None Left keeps being added to page

Question

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>

sounds like a javascript problem, not a silverstripe or php one. or does it work with a different php script in the backend? — Zauberfisch
@Zauberfisch you mean, that javascript is triggering infinite ajax scroll once too much? — rfLo
idk, I am not familiar with that infinity scroll plugin you use. I am just saying, that it looks like the error is somewhere in the javascript. Because it seems to correctly detect that there are no more records, but it fails to deny further loading. (and since this all happens on the frontend, there is nothing php or silverstripe can do about it) — Zauberfisch

rfLo rfLo · Accepted Answer · 2014-06-19T09:16:20

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>

Silvestripe + Infinite Ajax Scroll: None Left keeps being added to page

1 Answers