Reload other elements when use ajax

Anonymous

#36389

Hi,

I think that this question probably are a little about of scope, but is a problem that will affect more users in future. I’m trying to use search and filter pro with ajax and a plugin called WP image zoooom. The problem is when I use the ajax they not reload the images in WP Images Zoooom as you can see here and here.

I already try the support for WP Image and this is what I get

basically the javascript zoom object needs to be reloaded when the page changes. You can try contacting the Search & Filter Pro and ask them to hook the following code when presenting the product details page:

jQuery(document).ready(function( $ ){
    var options = {<?php echo get_option( 'zoooom_settings_js' ); ?>};
    $(".zoomContainer").remove();
    $(".attachment-shop_single").image_zoom(options);
}

Also they would need first to check if the WP Image Zoooom plugin exists with:
if ( class_exists( ‘ImageZoooom’ ) ) in PHP, or:
if ($.fn.image_zoom) in JavaScript. Whichever one fits into their code.

Can you give me any help?

Thanks

Ross Moderator

#36455

Hey Miguel

Check the first question here:

https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

You want the code for the event sf:ajaxfinish –

1) so you add the above link to your theme,
2) use the code for WP image zoooom inside the event handler

jQuery(document).ready(function( $ ){
	var options = {<?php echo get_option( 'zoooom_settings_js' ); ?>};

	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax complete");
		//so load your lightbox or JS scripts here again
		$(".zoomContainer").remove();
		$(".attachment-shop_single").image_zoom(options);
	});
}

Depends on how you are adding your JS, but I see a potential problem in their code (which I copied into my example) which may cause you some errors depending on if your JS is loaded inside an external JS file or inline in your site.

Thanks

[Author]

Posts