Filtering items with infinite-scroll

Question

I'm using masonry to generate 'tiles' - which I'm filtering with jQuery, and infinite scroll - which I'm using to load more tiles server-side.

The filter works, however once a filter is applied and more tiles are loaded via the infinite scroll, unfiltered items are loaded. I know that the reason behind this is because the unloaded tiles aren't generated client side yet, but I'd rather keep it that way because the website is going to get very data-heavy very fast.

Is there any way to do this without loading all of the items client side? I would be extremely appreciative of any input. I've included the infinite scroll script below. I noticed this link (www.creativebloq.com/web-design/filter-web-content-infinite-scroll-10134808), which sounds fairly relatable, however I'm not sure how it would be implemented.

!function($){
    var $container  = $(InfiniteConfig.container);
    var pageCount   = 0;
    var cpage       = 1;
    var _next       = $('div.k2Pagination  a:contains("Next")'),
        _divNext    = $('.view-more'),
        _btnNext    = $('a#viewplus'),
        _divLoading = $('div.k2-masonry-loading'),
        _btnLoading = $('div.loading_spinner_wrapper');
    $container.infinitescroll({
            navSelector : InfiniteConfig.navSelector,
            nextSelector: _next,
            itemSelector: InfiniteConfig.itemSelector,
            loading     : {
                selector    : _divLoading,
                img         : _btnLoading.html(),
                msgText     : '',
                speed: 'fast',
                finishedMsg : InfiniteConfig.finishedMsg,
                finished    : function() {
                    _btnLoading.css('display','none');
                    setTimeout(function(){
                        _divNext.css('display','block');
                    },500);
                }, 
            },      
            errorCallback: function(){
                _divNext.css('display','block');
                _divLoading.remove();
                _divNext.addClass('finished').html(InfiniteConfig.finishedMsg);
            },      
            debug       : true,
            path        : function () {
                pageCount += 1;
                var path = $(_next).attr('href')
                var _url = [];

                    _url = path.split('start=');
                    _url[0] += "start";

                url = _url[0];
                numItems = parseInt(_url[1]);
                nextLimit = numItems * (pageCount);
                return [InfiniteConfig.baseURL + url + '=' + nextLimit];
            }
        }, 
    function (newElements, data, url) {

        var elemWidth = $('#itemListPrimary .itemContainer').width(),
            $newElems = $( newElements ).css({ opacity: 0 , width: elemWidth});
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true ); 
        });
    });

    $(window).unbind('.infscr');
    _btnNext.click(function(){
        _divNext.css('display','none');
        _btnLoading.css('display','block');
        $container.infinitescroll('retrieve');
    return false;});
}(jQuery);

Thanks again.

Answer 1

Seeing as I know how much of a pain infinite scroll is, this is how I got round this.

I filtered the items by class in the newElements function, shown below.

function (newElements, data, url) {

                            var elemWidth = $('#itemListPrimary .itemContainer').width(),
                            $newElems = $( newElements ).css({ opacity: 0 , width: elemWidth});

                            $newElems.imagesLoaded(function(){

                                // show new elements
                                $newElems.animate({ opacity: 1 });
                                $container.masonry( 'appended', $newElems, true );

                                var children = $newElems.children();

                                // if filter is empty select all elements
                                if (!window.data) {
                                    console.log("nothing selected");
                                }
                                // if filter is selected filter elements
                                else {
                                   for (var i = 0; i < children.length; i++) {
                                       if ($(this).hasClass(window.data)) {
                                           $('.itemContainer').show();
                                       } else {
                                           $('.itemContainer').not('.' + window.data).hide();
                                       }
                                       // append layout
                                       $(window).bind('resize.masonry orientationchange.masonry').trigger('resize.masonry');
                                       };
                                    };
                                });
                            });