CODEWITHSUNDEEP
javascriptphpjqueryjquery-isotope
George Matthews
George Matthews

Reputation: 11

jquery isotope version 2 message if no result

I am using jquery isotope, to filter results, as:

      <div class="isotope">
      <div class="filter-item">1</div>
      <div class="filter-item">2</div>
      <div class="filter-item">3</div>
      </div>

JS Code:

      <script>
      $( function() {
      var $container = $('.isotope');
      if ( !$container.data('isotope').filteredItems.length ) {
      $container.html("Sorry.No result");
      }
      </script>

I am trying to display - Message, if no results in filter process. But its not working, any clues ?

Upvotes: 2

Views: 1994

Answers (3)

BenFictional
BenFictional

Reputation: 11

I spent a while trying to get this to work in Vanilla JS and thought I'd share my working solution for anyone else trying to do a "No results found" message without Jquery:

// ...after buttonclick detected
// set filter for Isotope
   iso.arrange({ filter: filterValue });
// No results check
    var noResults = document.querySelector('.no-results');
    
    if (iso.filteredItems.length == 0) {
      noResults.classList.add('visible');
    }
    else {
      noResults.classList.remove('visible');
    }

Upvotes: 0

Rijo
Rijo

Reputation: 2718

You can use this with isotope 'arrangeComplete' event:

$container.on( 'arrangeComplete', function( event, filteredItems ) {
        var resultCount = filteredItems.length;
        if(resultCount == 0) {
            $container.html("Sorry.No result");
        }
    });

Upvotes: 4

Ralph King
Ralph King

Reputation: 1074

You need to actually check if the length has a value.

if ( $container.data('isotope').filteredItems.length > 0)

You are missing the '>0' so will always get a truthy value. Also remove the !.

Upvotes: 2

Related Questions