Forums Forums Search & Filter Pro Reload masonry grid after Ajax call

Tagged: ,

Viewing 10 posts - 1 through 10 (of 11 total)
  • 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

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