Search Results for 'ajaxfinish masonry'

[Trevor]

Great to speak with you Kirk. You are going to have a look and see if this code example is of any use to you:

<script>(function ($) {
    
	function loadMasonry(){

		//$container will always be a new copy
		var $container = $('.ae-post-widget-wrapper');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.entry',
				columnWidth: '.entry',
				gutter: 40,
			});
			// Masonry has been initialized, okay to call methods
			
			// not sure if you will need this here but might be worth adding in
			//$container.masonry('reloadItems');
		});
	}
	
	
	//then also call it after ajax event
	$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
		console.log("ajax complete");
		loadMasonry();
	});

}(jQuery));</script>

[Trevor]

Ah, I see, he added this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
		var isocontainer = $('.reinit-isotope'),
			iso_selector = $('.reinit-isotope').data('iso-selector');
			isocontainer.isotopeb('destroy');
			isocontainer.isotopeb({masonry: {columnWidth: iso_selector}, layoutMode:'fitRows', transitionDuration: '0.8s'});
            if(isocontainer.attr('data-fade-in') == 1) {
                var isochild = isocontainer.find('.kt_item_fade_in');
                    isochild.each(function(i){
                        $(this).delay(i*150).animate({'opacity':1},350);
                    });
            }
});
}(jQuery));

[Trevor]

The gaps thing. My basic script would look something like this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    var $container = $('.reinit-isotope'), iso_selector = $('.reinit-isotope').data('iso-selector');
    $container.isotopeb({masonry: {columnWidth: iso_selector}, transitionDuration: '0s'});
  });
}(jQuery));

It would have to be inside script tags or in the Simple Custom CSs and javascript plugin (which does the script tags for you).

[Trevor]

I can see that you are using the custom method, which means it is your theme or page builder that creates the content. With reference to this documentation page:

https://searchandfilter.com/documentation/search-results/custom/

Which of the three methods are you using, or are you using the filter_next_query action in a shortcode (another alternative ‘Custom’ method)?

I suspect that whatever is making the content, is using something like the Masonry script and that needs to be refreshed on Ajax loading, but that can be complex unless the theme or plugin author is able to help. Essentially it requires javascript like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

// call your function(s) here

  });
}(jQuery));</script>

[Ross]

I figured it out. The script needed to relayout masonry is:

(function ( $ ) {
	"use strict";
	
	//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(){
		elementorFrontend.init();
		//so load your lightbox or JS scripts here again
	});
	
}(jQuery));

Also, in some circumstances, I noticed there were some pagination issues, these can be fixed by adding this to functions.php (replacing my-posts, with the slug of the page the posts widget is on):

//fix pagination issues in elementor when using posts widget with S&F
add_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
function elementor_post_widget_pagination_fix($query)
{
	if(is_page("my-posts")){
		$sf_paged = 1;
		if(isset($_GET['sf_paged'])){
			$sf_paged = intval($_GET['sf_paged']);
		}
		set_query_var("paged", $sf_paged); //elementor uses get_query_var to get current page, so lets set it before its performeed
	}
	remove_action('loop_start', 'elementor_post_widget_pagination_fix', 10);
}

Thanks

[Ross]

Hi Laura

Is $container, something that is updated/replaced in the ajax area?

Then likely $container is replaced, and effectively masonry won’t exist on the new content, so calling reloadItems will throw this error (this is of course all theory)..

I had a quick look at the code and wrote the following which I think should work, although untested:

(function ($) {
    
	function loadMasonry(){

		//$container will always be a new copy
		var $container = $('.grid');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.entry',
				columnWidth: '.entry',
				gutter: 40,
			});
			// Masonry has been initialized, okay to call methods
			
			// not sure if you will need this here but might be worth adding in
			//$container.masonry('reloadItems');
		});
	}
	
	//if you need to call on page load etc...
	loadMasonry();
	
	//then also call it after ajax event
	$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
		console.log("ajax complete");
		loadMasonry();
	});

}(jQuery));

Hope that helps

Thanks

[Anonymous]

It’s a custom theme I am building using the Genesis Framework.

I found your FAQ on this issue so I tried to implement your recommendation.

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
        $container.masonry('reloadItems')
});

I’m seeing the log statement, but I am getting the error:

Error: “cannot call methods on masonry prior to initialization; attempted to call ‘reloadItems’”

The Masonry Grid documentation covers that how to make sure your grid is initialized before calling a method, but I’ve followed that exactly and I am still getting the error.

https://masonry.desandro.com/faq.html#call-methods-error

I’ve tried all sorts of variations on this, but I am not having any luck.
This is what I have now:

(function ($) {
    var $container = $('.grid');

    $container.imagesLoaded(function () {
        // INITIALIZE MASONRY
        $container.masonry({
            itemSelector: '.entry',
            columnWidth: '.entry',
            gutter: 40,
        });
        // Masonry has been initialized, okay to call methods
        $(document).on("sf:ajaxfinish", ".searchandfilter", function () {
            console.log("ajax complete");
            $('.grid').masonry('reloadItems');
        });
    });

}(jQuery));

I’d appreciate any ideas of where I might be going wrong.

And thanks for the quick responses. I really appreciate it!

[Trevor]

Hi Josh

S&F Pro works with Avada. The problem is to get Ajax working with it. Theme Fusion have, so far, not provided the necessary code required to re-trigger Masonry (used in their Grid).

The process is to build a page in the page builder in Avada, placing our search form using a shortcode in a code element, let us assume that the shortcode for your form is this:

[searchandfilter id="1428"]

… and the Avada grid where you need it.

Directly above the grid element, add another code element (if the S&F form is already in a code element in that place, you can add these extra two snippets in that same element, under the form).

Then the two new snippets to use are these:

[searchandfilter id="1428" action="filter_next_query"]

and:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

The issue is (I have tried to guess what the code is, but so far haven’t figured it) what is need to replace this commented line?

// load your Masonry trigger code here

Then, in the Search & Filter form, the Display Results method needs to be set to Custom and the Results URL to the full URL of the results page.

With Ajax switched on (which is the part that does not work as of yet due to that missing code), the Ajax Container will also need to be set.

The last user to ask this question of Theme Fusion is from this thread:

https://support.searchandfilter.com/forums/topic/using-search-and-filter-not-working-with-cue-music-player/

Hopefully, Theme Fusion will provide an answer at some point. As I said, with Ajax OFF, it should work, with the page reloading.

[Trevor]

I took a look at the Page Builder and I am not familiar enough with it to try my idea. It was to use the Custom Display Results Method and either hook in the PHP template, or use the filter_next_query shortcode [e.g. [searchandfilter id="1428" action="filter_next_query"]]immediately before the grid). However, I can see that it is using Masonry to arrange the posts, and it may be that this will need re-triggering to re-arrange the posts each time a search is done.

Using a different theme (Beaver Themer), one user (@Ash) has very kindly posted how he did it:

https://support.searchandfilter.com/forums/topic/beaver-themer-integration-info-on-documentaion-page/

https://support.searchandfilter.com/forums/topic/beaver-themer-integration-info-on-documentaion-page-2/

https://support.searchandfilter.com/forums/topic/beaver-themr-integration-on-taxonomy-archive/

https://support.searchandfilter.com/forums/topic/beaver-builder-themer-integration/

Other than that, you may need to talk to the (very nice and helpful) guys at Beaver Builder.

The javascript method required to be able to re-trigger Masonry (not specific to Beaver Builder) uses code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

[Trevor]

The problem is that the masonry (isotope needs to be re-triggered when Ajax refreshes that element of the page. Our code would look like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
// load your Masonry trigger code here
  });
}(jQuery));</script>

If the Jupiter support team can provide you with this code, then we can move forwards.