Forums Forums Search & Filter Pro JavaScript event – sf:ajaxfinish not working

Viewing 10 posts - 1 through 10 (of 17 total)
  • Anonymous
    #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
    #248968

    How 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
    #249080

    I 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.

    Trevor
    #249145

    Are you able to send me a live link/URL to your search page so I can take a look?

    How is the code currently added to the page?

    Anonymous
    #249399
    This reply has been marked as private.
    Trevor
    #249417

    I made a search through all the files and content of that page and could not find our ajaxfinish code. Where is it located?

    Anonymous
    #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?

    Trevor
    #249451
    This reply has been marked as private.
    Anonymous
    #249885
    This reply has been marked as private.
    Ross Moderator
    #249897
    This reply has been marked as private.
Viewing 10 posts - 1 through 10 (of 17 total)