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, 4 months ago by Ross.

Viewing 10 posts - 1 through 10 (of 17 total)

1 2 →

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

(Private) June 17, 2020 at 10:51 am #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

(Private) June 17, 2020 at 3:56 pm #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

(Private) June 19, 2020 at 8:24 am #249399

This reply has been marked as private.

Trevor

(Private) June 19, 2020 at 11:24 am #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

(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?

Trevor

(Private) June 19, 2020 at 1:46 pm #249451

This reply has been marked as private.

Anonymous

(Private) June 24, 2020 at 9:40 am #249885

This reply has been marked as private.

Ross Moderator

(Private) June 24, 2020 at 11:46 am #249897

This reply has been marked as private.

Author

Posts

Viewing 10 posts - 1 through 10 (of 17 total)

1 2 →