How to apply a default filter to the container after dynamic insertion of items using Jquery Isotope plugin?

Question

I\'m using the Isotope Plugin. I have an empty container to which I am adding items on $(document).ready(...

All those items are added correctly and iso

Answer 1

I'm a little late to the party, but I had the same question when I was working with Isotope yesterday and ended up solving it a different way.

Let's say I have a group of filter buttons, much like what Systembolaget had:

  Show all
  Archived
  Current

Perhaps I want to only show the "Current" filter when a user finishes loading the page. I set a variable to the CSS selector matching the filter I wanted. We'll use this variable later.

var $grid;
var filterValue = "*:not(.hidden)";

Next, I need to initialize my content. I already had my content ready to go so I skipped this step, but you could use a JavaScript Promise if you're planning on loading the content asynchronously.

This is an example I took from Google's Promise introduction article:

var promise = new Promise(function(resolve, reject) {
  var content = [];

  // do a thing, possibly async, then…

  if (content.length > 0) {
    resolve(content);
  }
  else {
    reject(Error("Nothing loaded"));
  }
});

Here's the function I used to set-up the isotope grid and event listener:

function init() {
  // Initialize isotope and the filter method we want to use
  $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    filter: function() {
      return filterValue ? $(this).is(filterValue) : true;
    }
  });

  // Event listener for the filter buttons
  $('#filters').on('click', 'button', function() {
    filterValue = $(this).attr('data-filter');

    $(this).addClass('active')
           .siblings().removeClass('active');

    // Refresh the isotope grid to display the filtered items
    $grid.isotope();
  });
} 

Once you've defined what the promise should do, you can initialize your isotope grid. You'll need to nest it within the then method so that it only runs once the promise has successfully resolved. This also allows you to set-up any fallbacks that should run in the case where your content-loading step fails.

promise.then(function(results) {

  // Function defined in the last code snippet
  return init();

}, function(err) {
  // Error: "Nothing loaded"
  console.log(err); 

  // If you have a banner hidden on the page, you can display it
  $('.message').show();
});

If you don't need to use a promise (like in my case), then all you need to do is this:

init();