Ajax Loadmore, results not laying out.

[Paul Maloney]

Sorry to bug you! I've been working on an issue for DAYS and can't get to the bottom of it.

I'm using the latest shuffle with filtering, search and attempting to load more via ajax.

I'm initiating like so:

var Shuffle = window.shuffle;

var bookList = function(element) {
  this.element = element;

  this.shuffle = new Shuffle(element, {
    itemSelector: '.grid-item',
  });

  this._activeFilters = [];
  this.addFilterButtons();
  this.addSorting();
  this.addSearchFilter();
  this.mode = 'exclusive';
};

bookList.prototype.toArray = function(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
};

This works fine and filtering and such works.

I have an ajax load more with a PHP call in there:

function getMoreData(lastId) {
       $(window).off("scroll");
    $.ajax({
        url: 'getmore.php?lastId=' + lastId,
        type: "get",
        beforeSend: function ()
        {
            $('.ajax-loader').show();
        },
        success: function (data) {
        	   setTimeout(function() {
                $('.ajax-loader').hide();

				var $newItems = $(data);
				$(".grid").append($newItems);
				window.shuffle.add($newItems.get());

        	   }, 1000);

        }
   });
}

The items are called but sit behind the first bunch of results and the filtering and search doesn't work foir the new items. Am I missing something or is this beyond the scope of Shuffle? Looking at my inspector I can see the new results aren't having the shuffle classed added: https://share.getcloudapp.com/geuo9KZ0

Thanks in advance

[Paul Maloney]

edited: poor docs, switched to Isotope.