Forums › Forums › Search & Filter Pro › JavaScript event – sf:ajaxfinish not working
Tagged: ajax, events, JavaScript events, sf:ajaxfinish
- This topic has 16 replies, 3 voices, and was last updated 4 years, 3 months ago by Ross.
-
Anonymous(Private) June 16, 2020 at 9:16 am #248957
Hi,
I have my own js for show and hide filters. I want to listen to the ajax cycle for mark on active button when the filter was used after ajax finished.
When I just tried to check this js//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"); }); //depending on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practice): (function ( $ ) { "use strict"; $(document).on("sf:init", ".searchandfilter", function(){ console.log("S&F JS initialised"); }); }(jQuery));
that nothing happened, please help me how to use these events. I thought I need to just add this code for a check and it will work but it doesn’t.
Do I need to add something more/class to my results.php or something?
please give me advice on how to use sf:…. events.I will be grateful for your reply 🙂
Trevor(Private) June 16, 2020 at 10:47 am #248968How are you loading these to the page? If inline on the page, they need to be inside script tags, like this:
<script> $(function(){ $(document).on("sf:ajaxfinish", ".searchandfilter", function(){ console.log("ajax finish"); }); }(jQuery)); </script>
Anonymous(Private) June 17, 2020 at 10:51 am #249080I did it inside scripts tag and inside file.js (add script src to this file like normal), nothing happened, the console is empty.
I use this on woocommerce shop page, but every js working there – I’d checked hierarchy scripts but nothing change.
this is my script for the show and hide filters – maybe there is a problem but I can’t find it.
$(document).ready(function () { // show/hide filters in specify buttons $("form#search-filter-form-120 ul").first().addClass("all-filters"); $('p.button-filter').each(function () { $(this).on('click', function () { $(this).addClass('active').siblings().removeClass( 'active'); if ($(this).hasClass('active') && $(this).hasClass('button-filter-1')) { // if (window.location.href.indexOf('?sort_order=') > 0) { $("form#search-filter-form-120 ul.all-filters .sf-field-sort_order") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); // } } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-2')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-product_cat") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-3')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_family") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-4')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_finish") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-5')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_colour") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-6')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_material") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-7')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_size") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-8')) { $("form#search-filter-form-120 ul.all-filters .sf-field-post-meta-_price") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } else if ($(this).hasClass('active') && $(this).hasClass( 'button-filter-9')) { $("form#search-filter-form-120 ul.all-filters .sf-field-taxonomy-pa_availibility") .toggleClass( 'show-filter') .siblings('.show-filter').removeClass( 'show-filter'); } }) }); });
here is my results.php page
<?php /** * Search & Filter Pro * * Sample Results Template * * @package Search_Filter * @author Ross Morsali * @link https://searchandfilter.com * @copyright 2018 Search & Filter * * Note: these templates are not full page templates, rather * just an encaspulation of the your results loop which should * be inserted in to other pages by using a shortcode - think * of it as a template part * * This template is an absolute base example showing you what * you can do, for more customisation see the WordPress docs * and using template tags - * * http://codex.wordpress.org/Template_Tags * */ // If this file is called directly, abort. if ( ! defined( 'ABSPATH' ) ) { exit; } if ( $query->have_posts() ) { ?> <div id="ajax-reload" class="row"> <?php while ($query->have_posts()) { $query->the_post(); ?> <?php global $product; $pid = $product->get_id(); // Get wishlist for current user. ?> <div class="col-md-6 col-xl-4 product-block"> <div class="container-img"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ) { //the_post_thumbnail("small"); $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo '<div style="background: url('. $url.');" class="img-product-item">'; ?> <a id="wish-list-icon"><?php echo do_shortcode('[yith_wcwl_add_to_wishlist product_id=' . $pid . ']' )?></a> </div> <div class="overlay"> <img src="<?php the_field('pictogram_products') ?>" alt="" class="pictogram-img"> <div class="text"> <h2 class="name-product-overlay"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <?php $price = get_post_meta( get_the_ID(), '_regular_price', true); $price_sale = get_post_meta( get_the_ID(), '_sale_price', true); // Retrive products sale price // Formatted price by adding decimal $formatted_price_sale = wc_price( $price_sale ); $formatted_price = wc_price( $price ); // Formatted price by adding decimal ?> </div> <div class="cart-area-product"> <?php echo '<a class="disabled-link"> <div class="like-price-buy"> <a href="'. do_shortcode('[add_to_cart_url id=' . $pid . ']' ) .'" data-product_id="'. $pid .'" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart"> <svg xmlns="http://www.w3.org/2000/svg" width="18.417" height="22.521" viewBox="0 0 18.417 22.521"> <g id="Group_22" data-name="Group 22" transform="translate(1 1)"> <path id="Path_104" data-name="Path 104" d="M663.582,1530.458v-4.788a3.42,3.42,0,0,1,3.42-3.42h0a3.42,3.42,0,0,1,3.42,3.42v4.788" transform="translate(-658.794 -1522.25)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <path id="Path_105" data-name="Path 105" d="M666,1542.25v13.681H649.582V1542.25h17.095" transform="translate(-649.582 -1535.41)" fill="none" stroke="#636363" stroke-miterlimit="10" stroke-width="2"/> <line id="Line_4" data-name="Line 4" x2="8.795" transform="translate(3.664 12.459)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <line id="Line_5" data-name="Line 5" x2="8.795" transform="translate(3.664 15.391)" fill="none" stroke="#636363" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> </g> </svg> <span class="order-now-products">Order now</span> </a> <span class="price">'. do_shortcode('[product_price id='. $pid. ']' ).'</span> </div> </a>'; // Print new html with title and price ?> </div> </div> </a> </div> <div class="product-info-small"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> </div> <?php } ?> <p><?php the_category(); ?></p> </div> <?php } ?> </div> <div class="pagination"> <div class="nav-previous"><?php next_posts_link( 'Load more', $query->max_num_pages ); ?> </div> <div class="nav-next"><?php previous_posts_link( 'Load previous' ); ?></div> <?php /* example code for using the wp_pagenavi plugin */ if (function_exists('wp_pagenavi')) { echo "<br />"; wp_pagenavi( array( 'query' => $query ) ); } ?> </div> <?php } else { echo "No Results Found"; } ?>
if it helps will great.
Anonymous(Private) June 19, 2020 at 1:43 pm #249449$(function() { $(document).on("sf:ajaxfinish", ".searchandfilter", function() { console.log("ajax finish"); }); }(jQuery));
is in scripts in the footer.
But asking me about ‘ajaxfinish code’ you think about above or some different? Should I add some scripts to init this ajax and then it will work? -
AuthorPosts