Ajax call, Isotope, and Infinite Scroll (WordPress Search Filter)

[jessk4code]

I am trying to use Isotope and Infinite Scroll in an Ajax call.

I applied somewhat of the answer from these issues: https://github.com/metafizzy/isotope/issues/1481 https://github.com/metafizzy/isotope/issues/1045

I understand about using appended to add the new items to the Isotope instance. As @desandro explained, but... it still does not work with how I implemented it.

FYI: In my StackExchange answer, the attempted solution below is not featured.

Here is the full code:

jQuery(window).on('load', function () {

    let currentLocation = window.location.href;
    const ptParams = new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop),});

    let post_type_value = ptParams.post_type;
    let $scroll_container = jQuery('.scroll-content');

    $scroll_container.isotope({
        layoutMode: 'fitRows',
        itemSelector: '.scroll-post'
    }); //isotope

    jQuery('#filter').submit(function () {
        var filter = jQuery('#filter');
        jQuery.ajax({
            url: filter.attr('action'),
            data: filter.serialize(),
            type: filter.attr('method'), // POST
            beforeSend: function (xhr) {
                filter.find('button').text('Processing...');
            },
            success: function (data) {
                filter.find('button').text('Apply filter');
                //$scroll_container.html(data);
                                $scroll_container.append(data); 
                                let $items = jQuery( data ).find('.scroll-post');
                $scroll_container.isotope( 'appended', $items );
            } //success
        }); // jQuery ajax
        return false;
    }); //submit function

    let fhsFit = $scroll_container.data('isotope');

    if ( post_type_value === 'opone' || post_type_value === 'optwo' || post_type_value === 'opthree' ) {
        $scroll_container.infiniteScroll({
            path: 'page/{{#}}/?s=' + searchParam.search_term + '&post_type=' + post_type_value,
            append: '.scroll-post',
            button: '.btn-scroll',
            outlayer: fhsFit,
            loadOnScroll: false,
            scrollThreshold: 300,
            status: '.page-load-status',
            hideNav: '.pagination'
        }); //infinite scroll
    } else {
        $scroll_container.infiniteScroll({
            path: 'page/{{#}}/?s=' + searchParam.search_term + '&post_type=any',
            append: '.scroll-post',
            button: '.btn-scroll',
            outlayer: fhsFit,
            loadOnScroll: false,
            scrollThreshold: 300,
            status: '.page-load-status',
            hideNav: '.pagination'
        }); //infinite scroll
    } //if statement

    jQuery('.btn-scroll').on('click', function () {
        $scroll_container.on('load.infiniteScroll', function (event) {
            $scroll_container.isotope('layout');
            jQuery('.page-load-status').detach().appendTo(jQuery('.scroll-content'));
        }); //on load function
    }); // on click function
}); // window on load

Test case: https://bit.ly/3JNz6FI Full Issue on WordPress Stack Exchange: https://wordpress.stackexchange.com/questions/402963/wordpress-search-ajax-isotope-infinitescroll

[jessk4code]

I was able to come up with a solution and posted it on WordPress Stackexchange.

[jessk4code]

@desandro @ryanza @Dachande663 @DrorCohenCC Bad news... $container.data('infniteScroll'); does not work on v3 or v4. I was able to retrieve data with isotope $container.data('isotope'); but not with infiniteScroll.