Search code examples
javascriptphpcsssilverstripejquery-ias

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


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>

Solution

  • 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>