Ajax event hooks not working

Nathan Holmes

#263439

Hi, I’m having some trouble getting the ajax event hooks to work.
I added the code from the FAQ page for sf:ajaxfinish, but I’m not seeing anything in the console log.
See code below. Does anything stand out as to why this would not be working?

Thanks.

<?php

/**
 * The template for displaying search results pages.
 *
 * @package understrap
 */

// Exit if accessed directly.
defined('ABSPATH') || exit;

get_header();

$container = get_theme_mod('understrap_container_type');?>

<div class="wrapper contentPadding" id="search-wrapper">

<link rel="stylesheet" href="<?php echo get_site_url();?>/wp-content/themes/InyoBlogTheme/dist/bricklayer.min.css">
<script src="<?php echo get_site_url();?>/wp-content/themes/InyoBlogTheme/dist/bricklayer.min.js"></script>

	<div class="<?php echo esc_attr($container); ?>" id="content" tabindex="-1">
		
	<div class="row">
	<!--Display sub navigation partial view -->
		<?php get_template_part('partials/navtabs'); ?>
	</div>
	<div id="test">This is a test</div>
		
		<!--Display Search & Filter Widget -->
		<?php if (is_active_sidebar('search-bar')) : ?>
							<div id="search-bar" role="complementary">
								<?php dynamic_sidebar('search-bar'); ?>
								
							</div>
						<?php endif; ?>		

		<header id="search-title">
			
			<?php
			global $searchandfilter;
			$sf_current_query = $searchandfilter->get(102003)->current_query();	
			$args = array(
				"str" => '%2$s'
			);

			if (!$sf_current_query->get_search_term()=="") {
			echo '<h3>Search Results for:<span> "' . $sf_current_query->get_search_term() . '"</span></h3>'; 
			}

			?>
			
		</header><!-- .page-header -->

		<div class="row">

			<!-- Do the left sidebar check and opens the primary div -->
			<?php get_template_part('global-templates/left-sidebar-check'); ?>

			<main class="site-main" id="main">

				<?php if (have_posts()) : ?>

					<div class="bricklayer" id="my-bricklayer"> 
					<?php /* Start the Loop */ ?>

					<?php while (have_posts()) : the_post(); ?>
						<?php
							//Display search results based on content type. 
							//To change how different content types are displayed in search, edit the content-search loop template.									
							get_template_part('loop-templates/content', 'search');
									
						?>
						
					<?php endwhile; 

					wp_reset_postdata();

					?>

					</div><!--Bricklayer-->
						
				<?php endif; ?>
									
			</main><!-- #main -->

			<!-- The pagination component -->
			<div class="pt-3">
				<?php 
				understrap_pagination();
		
				?>
			</div>

			<!-- Do the right sidebar check -->
			<?php get_template_part('global-templates/right-sidebar-check'); ?>

		</div><!-- .row -->	

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

</div><!-- #search-wrapper -->

<script>
	var bricklayer = new Bricklayer(document.getElementById('my-bricklayer'));

	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//do or stop your animation
	});
</script>

<!--Display bottom advertisment-->
<?php get_template_part( 'partials/poolparts-ad'); ?>

<?php get_footer(); ?>

Add New Note to this Reply

Trevor Moderator

#263462

I would have coded that like this:

<script>(function ( $ ) {
  "use strict";
  var bricklayer = new Bricklayer(document.getElementById('my-bricklayer'));
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    //do or stop your animation
  });
}(jQuery));</script>

Add New Note to this Reply

[Author]

Posts