Ajax not working displaying results: Displaying method: “Custom”

Anonymous

#257183

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

Anonymous

#257189

This reply has been marked as private.

Trevor

#257207

I think the Results URL is the issue. You have a relative link there, but it must be a full URL:

https://strongertogether.lucascm.dev/things-to-do-at-home/

Anonymous

#257217

Thanks Trevor, I tried that solution already and I had tried it before. Still, it doesn’t work, however there is a difference, the page doesn’t reload anymore when I select an option in the filter, but the results don’t update.

Trevor

#257255

This reply has been marked as private.

Anonymous

#257279

Hi Trevor
Thanks, I updated the id for the container and the plugin settings to:
#thingsathome
But still doesn’t work. When I select an option, all the results fade to grey, like they were loading, but still shows the same number of tiles. However, the number on the right to each filter option update to the right number.

Settings

And my code looks like this now:

<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"]'); ?>
					
				</div>
			</div>

	</div>

</div>

<div id='thingsathome' 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/common/card-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
		) );
	?>

</div>

Trevor

#257331

This reply has been marked as private.

Anonymous

#257578

This reply has been marked as private.

Trevor

#257670

This reply has been marked as private.

Anonymous

#257675

This reply has been marked as private.

[Author]

Posts