Results don't show with AJAX, but do without AJAX

Anonymous

#73010

Thanks for developing a wonderful plugin. I’m excited to get it working!

I’ve followed your instructions for displaying results with AJAX, as well as those with a custom theme, but am unable to get it to work. When the AJAX box is unchecked, it redirects me to a new page with perfect post results (Categories, Authors, Custom Taxonomy, Sort Order, etc). However, when using AJAX, while it does fade out the designated Results Container id, it doesn’t populate anything after it fades back in.

I’m using this on the homepage of the site, if that makes a difference, but I’ve also tried it on a basic page and as a sidebar widget on the Blog page.

I’ll be glad to grant any access necessary if you would like. Thank you for any help you can offer.

Anonymous

#73012

I am using the NudieWP theme – http://nudiewp.com/ – if that helps.

Trevor

#73043

Is the page using a javascript grid systems, such as Masonry or Isotope, to populate/re-populate the grid? If so, it needs to be re-initialized after our Ajax runs. Our FAQ page gives snippets to show how (sort of) and other users have posted on the forum how they did it too.

Anonymous

#73279

Ok thank you! I’m not a jquery guy, so are those hooks meant to be run in a separate file or can I just add that file and call it from my child theme?

Trevor

#73281

It depends on your theme. Some themes give a specific place that you can place script snippets, and some you need to use the child theme functions.php file to enqueue an external file that you would make.

Anonymous

#73303

Ok, I’ve tried enqueuing the hooks listed in the FAQ within my functions file based on the instructions here: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

No errors, JS initialized correctly, but it’s still not working.

The theme I’m using (NudieWP) is a very basic, no-frills blank bootstrap theme. Is there anything else I could try or information I could share that might help troubleshoot?

Trevor

#73309

Can you share with me the code you used (inside code tags, the button is on the editor toolbar, once before the code and once afterwards)?

Anonymous

#73313

I’m not quite sure I understand what you need, but this is the code related to S&F that I have going:

On the page itself (within the WordPress editor):

[searchandfilter slug="sort-articles"]
<hr/>

<div id="dynamic-articles">

The enqueue action within my functions.php file:

add_action( 'wp_enqueue_scripts', 'child_theme_styles');

function theme_js() {
    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/sf-pro-ajax-events.js', array( 'jquery' ), '1.0', true );
}

add_action('wp_enqueue_scripts', 'theme_js');

The archive template I’m using (which works when AJAX is disabled):

<?php
/*
* Template Name: Search & Filter
* Description: Only to be used on homepage
*/

get_header(); // Loads the header.php template. ?>

		<div class="container">

			<div id="content">

				<?php get_template_part( 'loop' ); // Loads the loop.php template. ?>

			</div><!-- #content -->

		</div><!-- .container -->
		
<?php get_footer(); // Loads the footer.php template. ?>

Trevor

#73317

What is in this file?

sf-pro-ajax-events.js

Anonymous

#73323

Oh, sorry. Here you go:

//depeding on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practise):
(function ( $ ) {
	"use strict";
	
	$(document).on("sf:init", ".searchandfilter", function(){
		console.log("S&F JS initialised");
	});

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
});

//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
	console.log("S&F JS initialised");
});

}(jQuery));

[Author]

Posts