6

I am trying to get my isotope post page to work with a Load More button (as seen here: https://codepen.io/bebjakub/pen/jWoYEO). I have the code working on Codepen, but I couldn't get it working on the website.

Working Codepen (My (Filtering & Load More) - https://codepen.io/whitinggg/pen/qyvVwz

Live Page Link - Here

I am currently seeing this error in console in regards to my isotope.js file:

Uncaught TypeError: Cannot read property 'filteredItems' of undefined
    at loadMore (isotope.js?v=2.2.7:53)
    at HTMLDocument.<anonymous> (isotope.js?v=2.2.7:48)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

Can anyone help with what this error means? Please help me to resolve the it.

My Isotope.js File

jQuery(function ($) {


    // with jQuery
    var $container = $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'packery',
      columnWidth: '.grid-sizer',
      packery: {
        gutter: '.gutter-sizer'
      }
    });

     //Add the class selected to the item that is clicked, and remove from the others
     var $optionSets = $('#filters'),
     $optionLinks = $optionSets.find('a');

     $optionLinks.click(function(){
     var $this = $(this);
     // don't proceed if already selected
     if ( $this.hasClass('selected') ) {
       return false;
     }
     var $optionSet = $this.parents('#filters');
     $optionSets.find('.selected').removeClass('selected');
     $this.addClass('selected');

     //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
     $container.isotope({ filter: selector });

     return false;
     });

    // layout Isotope after each image loads
    $container.imagesLoaded().progress( function() {
      $container.isotope('layout');
    });


//****************************
  // Isotope Load more button
  //****************************
  var initShow = 15; //number of items loaded on init & onclick load more button
  var counter = initShow; //counter for load more button
  var iso = $container.data('grid'); // get Isotope instance

  loadMore(initShow); //execute function onload

  function loadMore(toShow) {
    $container.find(".hidden").removeClass("hidden");

    var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
      return item.element;
    });
    $(hiddenElems).addClass('hidden');
    $container.isotope('layout');

    //when no more to load, hide show more button
    if (hiddenElems.length == 0) {
      jQuery("#load-more").hide();
    } else {
      jQuery("#load-more").show();
    };

  }

  //append load more button
  $container.after('<button id="load-more"> Load More</button>');

  //when load more button clicked
  $("#load-more").click(function() {
    if ($('#filters').data('clicked')) {
      //when filter button clicked, set initial value for counter
      counter = initShow;
      $('#filters').data('clicked', false);
    } else {
      counter = counter;
    };

    counter = counter + initShow;

    loadMore(counter);
  });

  //when filter button clicked
  $("#filters").click(function() {
    $(this).data('clicked', true);

    loadMore(initShow);
  })


});

2 Answers 2

5

The issue behind why it was working on codepen and no on my site turns out to be a simple one. Cant remember why i did it now, but i had changed a line of code slightly from Codepen to site which seems to have caused the issue. That line was:

var iso = $container.data('grid'); // get Isotope instance

Should have been:

var iso = $container.data('isotope'); // get Isotope instance
0

problem is in this line.

var iso = $container.data('grid'); // get Isotope instance
when you print iso it will give you undefined value.

all code is fine as per my understanding. i tried same sample working fine.

 var iso = $container.data('isotope');

after using default functionality it is fine for me. if you try to console.log(iso); then it will print the object.

hope this will be helpful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.