Ajax Loading of Lister Items Using &direct=y and Pagination References

Oct 29, 2014 5:17 pm

The basic scenario:

Our client wants a lister which displays 9 video thumbnails on a page in a grid. Below the group of videos, is a button which says "Load More Videos". When you click that button, the next 9 videos will load after the current 9 and the page will scroll up to the new batch (for this scrolling you can use any number of plugins or methods).

Using Freedom's pagination [[total_pages]] tag and comparing the currently loaded or ajaxed [[page]] reference, we are able to create a nice incremental ajax loading scenario. Accrinet is using this technique in a deployment which has yet to go live, but as soon as it does, it will be posted here.

First, be sure to limit the number of items that the lister spits-out in the "Number of Items" dropdown.

The markup required in the lister Body layout is as follows. The most important of which are the div.grouping and the div.nextURL with its data- attributes (this should be hidden), and the a#loadNext link:



<section id="showcase">
   <div class="row grouping">
      [[repeat]]
      <div style="display:none;" class="nextURL" data-nextURL="[[next_url]]" data-page="[[page]]"></div>
   </div>
   <a id="loadNext">Load More Videos</a>
</section>


The script which controls the functionality is (jQuery required):



<script>
$(document).ready(function(){

//initialize ajax loading of more items
loadMore();

function loadMore(){
var currentPage = $('#showcase div.grouping:last .nextURL').attr('data-page');

if(currentPage != [[total_pages]]) { // compare the current page to the total number of pages
    $('#loadNext').click(function(e){ // if the page numbers aren't equal, this means there are still more groupings to be fetched, so enable that link
        e.preventDefault(); // don't let that anchor behave as it ordinarily would
        var theLink = $('#showcase div.grouping:last').find('.nextURL').attr('data-nextURL')+'&direct=y div.row'; // hey, here we are using '&direct=y' to limit the output of what's returned to only include the [[content]] result
        $('#showcase div.grouping:last').after('<div class="loader" />'); // create a new loader to house the subsequent ajax-returned data
        $('#showcase div.loader:last').load(theLink, function(){ // load the result into the loader div
           loadMore(); // repeat the function, attaching the click event to the next available grouping's call IF it exists
        });
    });
    }else{
    $('#loadNext').remove(); // get rid of the 'Load More' link when there's nothing more to fetch
    }
}
});
</script>

The javascript comments above should explain well exactly what each line is doing.

Nov 10, 2014 2:42 pm

Here's the live example of this method being used. Under the video thumbs, there's a 'Load More Videos' link which will ajax in 9 more until there are no more to load.

http://www.globalchamber.org/index.php?submenu=videoroom&src=directory&view=video_gallery