Making a loading more link which displays more results with AJAX

[Orkun]

Let's say I have 500 Eventpages or more with differen content fields(date, title, textarea etc..).

I would display all events in a list like this:

$events = $pages->find("template=event, limit=10");

echo "<div class='event-container'>";

foreach($events as $event){
    echo "<div class='event-detail'>
          <h1>$event->title</h1>
          <p>$event->short_description</p>
          </div>";

}
echo "<a class='load-more'>LOAD MORE</a>";
echo "</div>";

Now I want to make the load-more link to display 10 or 20 more events without reloading the page and showing a loading gif/text while its rendering the other events, when clicking on it . How can i achieve this? I know that i could use pagination for displaying this heavy amount of results but the customer doesn't want that because it don't fit in the design of the website. Can I probably achieve a combination with Pagination and Ajax, or are there other ways to do it?

[horst]

You may use one of those ready to use JS Libraries for Infinite Scrolling you can found on the net. One that I know and have used myself is IAS.

In PW you must use pagination as you explained above, also have to render the NEXT button, but with display:none in CSS to make it invisible. The JS-Script will pick it up and loads the next portion when the user scrolls down.

[MuchDev]

You may use one of those ready to use JS Libraries for Infinite Scrolling you can found on the net. One that I know and have used myself is IAS.

In PW you must use pagination as you explained above, also have to render the NEXT button, but with display:none in CSS to make it invisible. The JS-Script will pick it up and loads the next portion when the user scrolls down.

I have never really delved in to this, but would love to see a fully realized example using this method. I often stumble over how one manages manual page selection by the user for seo purposes. I would love to have a page with a combination of pagination and infinite scrolling. 

[horst]

I have used it only one times. If it is of any help, I can paste in some code snippets here from that site. But it isn't an infinite only solution, it is bundled together with masonry.

http://joerg-hempel.com/archiv/

JS parts:

// JS in every page that uses infinite scrolling
<script type='text/javascript'>
    var gLoaded = 0;
    var gMaxPages = 12;
    var gTriggerPageThreshold = 100;
    var gPaginationHistory = false;    // switch on / off URI updating for pages: example.com/path/page2 | /page3 | page4
    var gContainer = '#albums';
    var gItemSelector = 'article.album';
    var gColumnWidth = 228;         // 48
    var gGutter = 12;               // 12

    $(document).ready(function() {
        // make it visible if JS is supported
        $('div.ias_msg').css('display','block');
        starteMasonry();
        starteIAS();
    });
</script>

in an external JS file I have the functions for Masonry and IAS:

function starteIAS() {
    jQuery.ias({
        container            : gContainer,
        item                 : gItemSelector,
        pagination           : '.pagination',
        next                 : 'a.next-album',
        loader               : "<img src='/site/templates/styles/images/loader.gif' />",
        thresholdMargin      : -9,
        triggerPageThreshold : gTriggerPageThreshold,
        history              : gPaginationHistory,
        noneleft             : "<div class='ias_msg noneleft'><p>no more items available</p></div>",

        onLoadItems          : function(items) {
          // HNLOG
          console.log('IAS onLoadItems (' + gTriggerPageThreshold + ')');
            var newElems = $(items).show().css({ opacity:0 });
            newElems.imagesLoaded(function(){
                $('#albums').masonry('appended', newElems);
                newElems.animate({ opacity:1 });
            });
            $('#albums').masonry('reloadItems');
            return true;
        }
    });
}

function starteMasonry() {
    var items = $(gContainer + ' ' + gItemSelector).show().css({opacity:0});
    $(gContainer).masonry({
        itemSelector         : gItemSelector,
        isOriginLeft         : true,
        isOriginTop          : true,
        columnWidth          : gColumnWidth,
        gutter               : gGutter,
        isAnimated           : true,        // !Modernizr.csstransitions
        isFitWidth           : true
    });
    items.animate({opacity:1});
}

The PHP looks like:

// calculate current amounts
$limit = 100;
$max	= $pages->find("$pSelector,limit=2")->getTotal();
$cur	= $input->pageNum;
$next   = ($cur * $limit) < $max ? $cur + 1 : 1;
$prev   = $cur > 1 ? $cur - 1 : 0;
$start  = $cur < 2 ? '0' : strval($limit * ($cur -1));

    // echo prev-next links for pagination  (only next is required, prev isn't used !!)
    $pagination = "<div style='display:none' class='pagination'>";  // hide it !!
        //if($prev > 0) $pagination .= " <a href='{$archivURL}page{$prev}'>prev</a> |";
        if($next > 1) {
            if(isset($nextPageUrl)) {
                $pagination .= " <a class='next-album' href='{$nextPageUrl}page{$next}'>next</a> ";
            } else {
                $pagination .= " <a class='next-album' href='{$archivURL}page{$next}'>next</a> ";
            }
        }
    $pagination .= "</div>\n";
    echo $pagination;

    // Hinweis zum scrollen
    echo "<div class='ias_msg scrolldown".($cur)."'><p>scroll down to get more items</p></div>";

    // get PageArray
    $albums = $pages->find("$pSelector, limit=$limit, start=$start, sort=sort");

    // output albums with thumbnail and infos
    foreach($albums as $album) {
        // ... render items
    }

Using IAS, you even don't need to check for ajax request or not. just send the whole page, with header and body. The script knows the selectors and pick up the needed content and add it to the dom, after the last renderd from previuos request. Easy!