Mansonry and AJAX Issues

Trevor

#190937

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>

Anonymous

#190942

Hi Trevor,

The code you’ve provided has helped me re-initiate the masonry grid after a search has taken place, which was another problem that I need to overcome.

I’ve modified the code slightly for responsiveness…

(function ($)
 {
    
	"use strict";
	
	function loadMasonry(){
		
		//$container will always be a new copy
		var $container = $('.search-filter-results-list');
		
		//running images loaded again after page load / ajax event 
		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			$container.masonry({
				itemSelector: '.search-filter-result-item',
				columnWidth: '.grid-sizer',
				gutter: '.gutter-sizer',
				percentPosition: true,
				horizontalOrder: true
			});
			// 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();
	});

	//an event fired when S&F is initialised and S&F scripts have been loaded
	$(document).on("sf:init", ".searchandfilter", function(){
		console.log("S&F JS initialised");
		loadMasonry();
	});

	
}(jQuery));

I’m still having issues with the next items loading in via AJAX in a masonry layout though.
https://mgg.devrap.co.uk/

I’m currently investigating, but if you have any further suggestions, please let me know.

Thanks for your time so far.

Regards,

Kirk

Anonymous

#190978

Hi Trevor,

I’ve now added the following and masonry and AJAX is working…

$container.masonry('reloadItems');

I’ve placed this here…

		$container.imagesLoaded(function () {
			// INITIALIZE MASONRY
			
			$container.masonry('reloadItems');
			
			$container.masonry({

Thanks again for your assistance.

Regards,

Kirk

[Author]

Posts