Search Results for 'ajaxfinish masonry'

[Trevor]

Masonry, as a JavaScript, needs to be specially triggered to run correctly. The author of the software that outputs your grid will have written it to trigger on page load, but that would need to be called again after our Ajax reloads just that part of the page. Sadly, previous attempts to get from Enfold how their Masonry works have not been successful. There is no standard way to do re-trigger the masonry, but we do have a JavaScript wrapper that would trigger that code. This forum search shows a number of threads where other users have done something like this:

https://support.searchandfilter.com/forums/search/ajaxfinish+masonry/

[Anonymous]

Hi Trevor,

I finaly found the solution using a part of your code and Masonry documentation.
This is my full process to help other if you have a new request about that :

> I create a search&filter form using shortcode method, ajax load and infinite scroll.
> I used the RESULTS template of Infinite scroll but i delete the div ‘search-filter-results-list’.
> I call the masonry JS file and i use this function to apply the masonry system to my grid :

$container = $('.search-filter-results');		
$container.masonry({
	itemSelector: '.post',
	columnWidth: '.post'
});

$(function(){
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("ajax finish");
		$container.masonry('reloadItems');
		$container.masonry().append().masonry('appended'); 	
	});
}(jQuery));

Thanks a lot for your help.
Simon.

[Trevor]

Maybe add this to the page also then:

<script type="text/javascript">
  $(function(){
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax finish");
      $('.search-filter-results').masonry({
        itemSelector: '.post',
        columnWidth: '.post',
      });
    });
  }(jQuery));
</script>

[Anonymous]

Hi Trevor,

Ahh thanks ever so much for this, so I adjusted the code and now added the reload bit, which in Ross’s example it says we might need it… and so I think we did hehe, sorry should have tried that before!!

So… this is now the code:

		function loadMasonry(){

			//$container will always be a new copy
			var $container = $('.grid-masonry');
			
			// running images loaded again after page load / ajax event 
			// $container.imagesLoaded(function () {
				// INITIALIZE MASONRY
				$container.masonry({
					itemSelector: '.grid-item',
					columnWidth: '.grid-item',
					percentPosition: 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');
			// });
		}
		
		//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();

			$('.link-scroll').bind('click',function(e){
				var $anchor = $(this);
				$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1500,'easeInOutExpo');
				e.preventDefault();
			});

		});

So, almost there, the only tiny thing I am seeing is as you scroll it initially puts the posts on top of the existing ones, then as you scroll corrects itself [section redacted by @trevorsf]

Do you any little adjustment I can make to stop that?

Then I think all is perfect, so thank you again for your brilliant support! Don’t know what we’d do without your plugin, we use it on all sites, best out there as far as we’re concerned :)!!

Many thanks,
Tonya

[Anonymous]

Hi Trevor,

Thank you for this, so yep I’m already re-calling Masonry after your Ajax call, which usually always works, as we’ve used this loads with your plugin, the only difference on this one is that we’re using Infinite Scroll vs. Paging, and I think that’s where, for some reason, it’s not quite happy. If I change it to paging it works fine, but can you see on Infinite Scroll it loads the items on top of each-other?

This is the code which I did update to be more exact to Ross’s example, but sadly still no luck as it was doing the same as what we already had before (and like I say which does re-trigger it fine on paging):

		function loadMasonry(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-item',
	            percentPosition: true
	        });
		}
		
		loadMasonry();
		
		$(document).on("sf:ajaxfinish", ".searchandfilter", function () {
			console.log("ajax complete");
			loadMasonry();

		});

Hope that helps :).

Many thanks,
Tonya

[Anonymous]

Hi Trevor,

Thanks ever so much for your quick reply as always :).

[section redacted by @trevorsf]

Ah so your code I think is for use with the Post Grid plugin, but we don’t use that, we use our own Masonry integration, which as I say if we use paging, the code we add seems to re-fire it, but it’s just when we use Infinite Scroll, you will see what it does once logged in as Admin and hopefully you can let me know what we need to do 🙂

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

Thank you again,
Tonya

[Trevor]

Hi. I am having a problem, in that the link you give is re-directing to the home page?

When I edit that insights page in the admin editor, it is empty?

Did you add this script to the page (with the ID changed to your Post Grid ID):

(function ( $ ) {
	"use strict";
	/* Replace the ID <code>123456</code> with the ID of your grid */
	var my_grid_id = '#post-grid-123456'; //alternatively use <code>.post-grid</code> for a less targeted approach
	
	var $my_grid = {};
	var $grid_items = {};
		
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		
		$my_grid = $(my_grid_id);
		$grid_items = $my_grid.find('.grid-items');
		
		if($grid_items.length>0){
			if($grid_items.hasClass("masonry")){
				$grid_items.removeClass("masonry");
				$grid_items.masonry('destroy');
			}
			$grid_items.removeAttr('style');
			$grid_items.masonry({isFitWidth: true});
		}
	});		
}(jQuery));

If on its own and inline, it needs to be in script tags.

[Anonymous]

Hello there,

Please could I get your help with something, I basically have Infinite Scroll with Masonry.

My code is:

        $('.grid-masonry').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true
        });

		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	        $('.grid-masonry').masonry({
	            itemSelector: '.grid-item',
	            columnWidth: '.grid-sizer',
	            percentPosition: true
	        });
	    });

And if I use usual pagination, all works fine, but when I use infinite scroll the second set of results load on top of the first set.

I also set the Infinite Scroll all accordingly with the post result selector and container settings.

I have done a search in Google and saw some suggestions but wasn’t sure they were exactly my case, so thought best to check with you :).

Many thanks,
TJ

[Trevor]

I made an edit to the page to remove the shortcode element and replace it with a Text element, with this in it:

[searchandfilter id="2017"][searchandfilter id="2017" 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.cards', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

I also enabled Masonry for the Post Grid (without which there is an issue with images).

[Anonymous]

Got it working with the help of BB support…

jQuery(document).ready(function($){
    
// detects the end of an ajax request being made
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){

   refreshGridLayout();
    
});

/**
 * Public method for refreshing Masonry within an element
 *
 * @since 1.8.1
 * @method refreshGridLayout
 */
function refreshGridLayout() {
    
    var $element         = $( '.fl-module-post-grid' ),
         msnryContent    = $element.find('.masonry'),
         postItem       = $element.find('.fl-post-grid-post');
    
    if ( msnryContent.length ) {
        $element.imagesLoaded(function () {
            msnryContent.masonry('reloadItems');
            msnryContent.masonry('layout');
            postItem.css('visibility', 'visible');
        });
    }
        
});

The pagination becomes borked but by overriding the post-grid module and moving the pagination markup into the main fl-post-grid container fixes it up.