Reload masonry grid after Ajax call

Anonymous

#164550

My search/filter results are being displayed in a masonry grid. I want to use Ajax to display my results but the masonry grid doesn’t reload after the ajax call. I need to reload the grid after the ajax call. Is there any place I can add a function to reload the masonry grid?

Trevor

#164559

What theme are you using?

Anonymous

#164567

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

#164580

That is something I too have been trying to get working for some time, but with no joy, so I am not sure I can help you. In the end I used Salvattore, as it is easier to integrate and re-trigger.

Anonymous

#164593

Ideally, I’d like to get this working with Masonry since it’s packaged with WordPress and a lot of people use it, I feel like I may run into this issue again.

I’ll see what I can find out on my own and I’ll let you know if I get it sorted.

I’ll also check out Salvattore. I hadn’t seen it before, but I like the idea of a CSS-driven configuration.

Trevor

#164596

Elegant Themes use Salvattore in Divi. I do not know if others use it.

Anonymous

#165670

Is it possible to get your developer to look at this issue? I can’t get Salvattore to work and I really need to get this grid working with ajax with some method.

Trevor

#165674

This reply has been marked as private.

Anonymous

#165691

This reply has been marked as private.

Ross Moderator

#165867

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

[Author]

Posts