Hi
I’m using a form to filter posts from a taxonomy in a custom post type. The filter works, but not the AJAX, so the page reload whenever I select an option.

To “Display results Method” I’m using “Custom”
Search Form settings: Display-results

Also, I;m wrapping the results a div with the id that I specify on the settings above.

Here is my code:

	<div id="hidden-filters" class="hidden-height">

			<div class="row">
				<div class="col-12 col-lg-7"></div>
				<div class="col-12 col-lg-5">
					<h3>Categories</h3>
					<?php echo do_shortcode('[searchandfilter id="445"]'); ?>
					<?php echo do_shortcode('[searchandfilter id="445" show="results"]'); ?>
				</div>
			</div>

	</div>

</div>

//* Remmber that in order to work we need the follwing contianer with the specif class or ID
<div id='things-at-home-results' class="container flex-wrapper">
<!-- get_template_part('template-parts/content', 'archive' ); -->

	<?php 
		$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

        $args = array(  
			'post_type' => 'thingsathome',
			'paged' => $paged,
            //'post_status' => 'publish', 
            //'orderby' => 'date', 
            //'order' => 'ASC', 
            'tax_query' => array(
                array(
                    'taxonomy' => 'thingsathome_category',
                    'field' => 'term_id',
                    'terms' => 20,
                )
            )
        );
        $args['search_filter_id'] = 445;

        $loop = new WP_Query( $args ); 
    ?>

	

		<?php while ( $loop->have_posts() ) : $loop->the_post();  ?>
				<article class="flex-item" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php get_template_part('template-parts/content', 'things-at-home' ); ?>
				</article>

		<?php endwhile; ?>

	<?php wp_reset_postdata(); ?>

	<?php 
		// Pagination 
		$big = 999999999; 
		echo paginate_links( array(
			'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'total' => $loop->max_num_pages
		) );
	?>

One Thing to note I have tried already to use a different display method: “As an archive”
I had similar results, however using this method the results didn’t refresh when selecting a new option, but the page didn’t reload as well.
I updated the Loop in my code, following this example:

The Loop

my code was like this:

	<div id="hidden-filters" class="hidden-height">

			<div class="row">
				<div class="col-12 col-lg-7"></div>
				<div class="col-12 col-lg-5">
					<h3>Categories</h3>
					<?php // echo facetwp_display( 'facet', 'play' ); ?>
					<?php echo do_shortcode('[searchandfilter id="445"]'); ?>
					<?php echo do_shortcode('[searchandfilter id="445" show="results"]'); ?>
				</div>
			</div>

	</div>

</div>

<div id='things-at-home-results' class="container flex-wrapper">
<!-- get_template_part('template-parts/content', 'archive' ); -->

	<?php 
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post(); ?>
			<article class="flex-item" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<?php get_template_part('template-parts/content', 'things-at-home' ); ?>
			</article> <?php
		} // end while
	} // end if
	?>
		

	<?php 
		// Pagination 
		$big = 999999999; 
		echo paginate_links( array(
			'base' => str_replace( $big, '%#%', get_pagenum_link( $big ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'total' => $loop->max_num_pages
		) );
	?>

</div>

I would like to get the “Custom” one working, but I don’t know how to solve this issue.
I have tried already, disabling Ajax, gives the same result (Every time I select an option the page reloads). I already checked the id for the div for the ajax results. There were no errors in the console. I can give you an admin login if you want

Here is the url for the page: Filter not working with AJax