CODEWITHSUNDEEP
javascriptjquerywordpressinfinite-scrolljquery-isotope
Xavier C.
Xavier C.

Reputation: 192

InfiniteScroll + isotope : loadNextPage until item count greater than 3

I am trying to do a while loop on the click of the isotope filter button, everything works fine until I put my two functions : loadNextPage and count items in a while loop, the browser is stuck in an infinite loop, even though the cnt variable should be updated every time the loop runs. I want the two functions to run until the cnt variable reaches 4

  $('.filter-button-group').on('click', 'button', function () {
     var filterValue = $(this).attr('data-filter');
     $grid.isotope({filter: filterValue});
     cnt = 0;
  
     while ( cnt < 4 ) {
        loadPageIso();
        countIsoItems();
     }

     function loadPageIso() {
        $grid.infiniteScroll('loadNextPage');
     }
     function countIsoItems() {
        $grid.on( 'append.infiniteScroll', function() {
           cnt =  iso.filteredItems.length;
        });
     }
  });

The whole isotope + infiniteScroll code is wrapped inside a

jQuery( document ).ready( function( $ ) {
   //code is here
});

I'm guessing this may have something to do with the issue, and until i wrapp my two functions in the while loop, everything works as intended.

Upvotes: 1

Views: 361

Answers (1)

Xavier C.
Xavier C.

Reputation: 192

I found a better approach, instead of using a while loop, i used a self-call function loop and waiting for the right callback, here is the full code in case you stumble upon this post and are searching for a full solution

jQuery( document ).ready( function( $ ) {
$('.grid').imagesLoaded(function () {
    var $grid = $('.actus-grid');
    $grid.isotope({
        itemSelector: '.actus-grid-item',
        percentPosition: true,
        masonry: {
            columnWidth: '.actus-grid-item',
        }
    });
    var iso = $grid.data('isotope');
    $grid.infiniteScroll({
        path: '.nav-previous > a',
        append: '.actus-grid-item',
        outlayer: iso
    });

    // filter items on button click
    $('.filter-button-group').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({filter: filterValue});
        //load next page if filtered items count is inferior to post per page setting
        loadMoreLoop();
        function loadMoreLoop() {
            loadPageIso(); 
            countIsoItems();
            //wait for right callback
            $grid.on( 'append.infiniteScroll', function() {
              if (cnt < 3) loadMoreLoop();
            });
        }
        //load next page
        function loadPageIso() {
            $grid.infiniteScroll('loadNextPage');
            //decrement z-index property of items to prevent overlapping while isotope filtering
            $('.actus-grid-item').each(function(i){
                $(this).css('z-index', 999 - i);
              });
          }
        // Count items visible in grid
        function countIsoItems() {
            cnt =  iso.filteredItems.length;
        }

    });

function updateFilterCount() {
    cnt =  iso.filteredItems.length;
}
updateFilterCount();

 });
});

Upvotes: 0

Related Questions