Reload masonry grid after Ajax call

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!

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.

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.