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:
#1481
#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.