0

Fairly simple concept. I have a paginated datasource which feeds content to a masonry wall in blocks of 15. I want to stick a 'Load More' button on there.

Do I need to load the whole DS and eliminate pagination, then just mask it with jQ? Sounds like it could get laggy?

How can I wire up this functionality? To only feed in the XML output if it's requested? I tried briefly to take an existing Append button from the masonry docs but my code made it work as a link to page "NaN" ... I've not really mixed XSL and jQuery too much. Don't know where to start.. Below is my code for the button.

            <a href="{$root}/?page={/homepage-aritcles/pagination/@current-page + 1}">  <button id="append-button">++++ LOAD MORE POSTS ++++</button>   </a>

Here's the relative js:

function getItemElement() {
  var elem = document.createElement('div');

  elem.className = 'item ' ;
    return elem;
}

$(function(){

      var $container = $('.post.content'),
          $boxes = $container.find('.item'),
          firstTime = true;

      $(window).smartresize(function(){

        var containerWidth = $container.width(),
            colWidth = Math.floor( containerWidth / 3 ),
            applyStyleFnName = firstTime ? 'css' : 'animate';


        $boxes.each(function(){
          var $this = $(this),
              cols = $this.data('cols'),
              boxWidth = Math.floor( colWidth * cols );

          $this[ 'css' ]({ width: boxWidth }, { queue: false });
        });


  $('#append-button').on( 'click', function() {
    var elems = [ getItemElement() ];
    $container.append( elems ).masonry( 'appended', elems );
  });
AcidX
  • 17
  • 5

1 Answers1

1

You can request the second page of results from your datasource by setting the "start at page" parameter to a variable.

So, as you've written "/?page=" for your anchor, you can set the datasource's "start at page" to "{$url-page}". This can be done in the Symphony UI or by editing your datasource PHP file.

You can then load this page with an ajax request from jQuery.

All GET parameters are accessible in Symphony pages as variables that start with "url-".

Here's a basic example, you'll want to expand it for things like loading states and detecting if there are no more pages to load.

Button XSL (make sure it's outside the ajax page container):

<a class="js-loadmore" data-current-page="{pagination/@current-page}" href="/?page={pagination/@current-page + 1}">Load More</a>

Page 1 markup:

<div class="ajax-page">
  <p>I'm on page 1<p>
</div>

Page 2 markup:

<div class="ajax-page">
  <p>I'm on page 2</p>
</div>

JS:

$('.js-loadmore').click(function(e) {
  e.preventDefault();
  var $btn = $(this),
      page = $btn.data('current-page') + 1,
      $dest = $('.ajax-page');

  $.ajax({
    url: '/?page=' + page,
    success: function(data) {

      // Find elements inside the container on the 2nd page and put them in the first page
      $(data).find('.ajax-page').children().appendTo($dest);

      // Update counter so subsequent clicks loads the next page
      $btn.data('current-page', page);

    }
  });

});

After clicking...

<div class="ajax-page">
  <p>I'm on page 1<p>
  <p>I'm on page 2<p>
</div>
g-wilson
  • 1,246
  • 1
  • 8
  • 4
  • Oh wow, that looks like what I need... Makes sense that {$root} is gone off the anchor. I'll give this a go later and let you know what happens! The whole concept of ajax is new to me. – AcidX Apr 29 '14 at 15:02
  • @AcidX The {$root} may still be necessary depending on your environment, in most cases it is redundant though. I left it out for brevity. – g-wilson Apr 29 '14 at 15:13
  • Okay! It sort of works.. However, it's currently loading the same page of entries and doesn't expand the container... They just appear behind the current ones? Also, there's multiple instances of masonry on this page; running off the same named container, so they appear in all of them. Is this likely to be affecting the behaviour in the way described?? – AcidX Apr 29 '14 at 17:34
  • @AcidX To stop the overlapping you will need to re-initialise Masonry. Calling .Masonry() on the selector again will do this IIRC. Check the inspector's network tab and see if it is actually loading the correct page (you should see /?page=2, /?page=3 etc. when clicking the button). If it is not like this (maybe it's /?page=undefined) there's a problem in the JS somewhere. If it is like this, make sure you've set the datasource up correctly. The datasource php file should read: public $dsParamSTARTPAGE = '{$url-page}'; – g-wilson Apr 30 '14 at 10:25