CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
Adam Youngers
Adam Youngers

Reputation: 6749

jQuery Isotope filter to no items?

I'm using isotope to filter a list with multiple filters where it is possible that based on a combination of certain filters no items will be displayed. In this case I want to display a message to the user that based on their filter parameters, no results exist. How would I go about that and does isotope have something built in to handle this? Here is a jsfiddle example. should be displayed if no items match filter set...

http://jsfiddle.net/cssguru/e4vA3/

   $(function(){

   var $container = $('#container'),
      $checkboxes = $('#filters input');

   $container.isotope({
    itemSelector: '.item'
   });

   $checkboxes.change(function(){
    var filters = [];
    // get checked checkboxes values
    $checkboxes.filter(':checked').each(function(){
      filters.push( this.value );
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join('');
    $container.isotope({ filter: filters });
   });

   });

Upvotes: 5

Views: 8353

Answers (4)

Timotheus0106
Timotheus0106

Reputation: 1586

Just found a great solution at isotopes github issue-page.

Isotope v1:

$container.isotope({ filter: '.my-crazy.awesome.filter' });


if ( !$container.data('isotope').$filteredAtoms.length == 0) {
    // do stuff when no element was found
}

See Isotope Help - accessing the instance

Isotope v2

if ( !$container.data('isotope').filteredItems.length == 0) {
    // do stuff when no element was found
}

See Isotope - Filtered Items

see full post here

Upvotes: 2

Henrique M.
Henrique M.

Reputation: 502

In addition, to work in Isotope 2 you have to check if it is visible/not visible instead of having the class isotope-hidden:

Like this

var numItems = $('.item:visible').length;

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

Just to add to what nspace said...

You don't need to add the 'reLayout' callback, you can make the callback in the code you already had here $container.isotope({ filter: filters }); like this:

$container.isotope({ filter: filters }, function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
        if (numItems == 0) {
        alert("There are no results");
    }
});

http://jsfiddle.net/xvU8D/33/

This is taken from the docs here: http://isotope.metafizzy.co/docs/introduction.html#script - do a page search for 'callback'.

Upvotes: 4

nspace
nspace

Reputation: 126

You can could to see how many isotope items do not have the "isotope-hidden" class added to it. When the result is 0, it means that all of your elements will be hidden and you can trigger something to happen. You could use a callback function, like reLayout to run every time the isotope gets filtered.

function noResultsCheck() {
    var numItems = $('.item:not(.isotope-hidden)').length;
    if (numItems == 0) {
        //do something here, like turn on a div, or insert a msg with jQuery's .html() function
        alert("There are no results");
    }
}

Add this to your change function:

$container.isotope( 'reLayout', noResultsCheck );

http://jsfiddle.net/xvU8D/

Upvotes: 8

Related Questions