Search Results for 'ajaxfinish masonry'

[Trevor]

This is some sample code to re-load masonry/Isotope:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
// so load your masonry script here again
  });
}(jQuery));</script>

[Trevor]

Did you follow our guide for using the Elementor Post Grid. Our plugin will integrate with this (to show any Post Type) to allow you to show results in a grid. Our guide for Elementor:

https://searchandfilter.com/documentation/3rd-party/elementor/

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

Use this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a HTML widget, in the Text view tab), it needs the <script>.....</script> tags around it. You can often place the form shortcode, the linking filter_next_query action shortcode, and the script all in one text module. So, the entire code block might look like this:

[searchandfilter id="25413"]
[searchandfilter id="25413" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
}(jQuery));</script>

[Trevor]

At the moment you are using our Shortcode display results method. You have two alternatives:

#1 Use the Elementor Post grid. Our plugin will integrate with this (to show any Post Type) to allow you to show results in a grid. Our guide for Elementor:

https://searchandfilter.com/documentation/3rd-party/elementor/

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

Use this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it. You can often place the form shortcode, the linking filter_next_query action shortocde, and the script all in one text module.

#2 Use our integration with the free Post Grid plugin. See here:

https://searchandfilter.com/documentation/3rd-party/post-grid/

[Trevor]

Did you follow our guide for Elementor:

https://searchandfilter.com/documentation/3rd-party/elementor/

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

Use this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.

[Trevor]

Did you follow our guide for Elementor:

https://searchandfilter.com/documentation/3rd-party/elementor/

Even if you do not have Masonry enabled (it might not even be an option), use the guide for Masonry & Ajax, but, instead of this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

Use this code:

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));

Note, if you are placing the code inline on the page (in a widget), it needs the <script>.....</script> tags around it.

[Trevor]

The results are there but hidden? If so, does the elementor grid element have the option to enable Masonry (not an issue if it does not)? The Text block that has the form in should look something like this:

[searchandfilter id="246086"]
[searchandfilter id="246086" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

In that order.

[Trevor]

Wherever you have the form shortcode, place the other after it, in the one block, like this, making sure there is also a script there (make sure you enter this in the Text tab of the widget):

[searchandfilter id="8208"]
[searchandfilter id="8208" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

They should all be in the same text widget.

Then, in the Posts Grid, make sure that Masonry is enabled.

[Trevor]

In the Post grid setup, do you have Masonry enabled? If not, can you try that? You would need this script on the page (you can put it inside the simple text editor pane – not the visual text editor pane of the widget – of a Text Widget):

<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

It can be in the same Text widget at the shortcodes for the form and the filter_next_query action, in which case the whole thing would look like this (your ID will be different:

[searchandfilter id="222"][searchandfilter id="222" action="filter_next_query"]<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

[Trevor]

OK. Is the Masonry option ON in the Elementor Post Grid? It is best to be ON.

In the text block where the [searchandfilter id="2514"] is, add also this code (in Text mode):

<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

[Anonymous]

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