Search Results for 'ajaxfinish masonry'

[Trevor]

Did the page builder come with the theme (is the theme ‘Mega’?), or is it a separate plugin from a third party author? Mega seems to have its own page builder included.

Do you place content on the page using widgets, and in those can you place shortcodes?

Are you able to place a widget with a shortcode directly above the portfolio grid, and if so, can you try this shortcode?

[searchandfilter id="1459" action="filter_next_query"]

Your grid might be using the masonry script as well, so it may be necessary to re-trigger the masonry script as well, using code like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

However, you would the help of your theme author to provide the code for that one line. It varies from theme to theme.

However, in your case I think reloaditems is the way to go, as shown on this page:

http://masonry.desandro.com/methods.html#reloaditems

So the line of script would be this:

$grid.masonry('reloadItems');

But, you need to define $grid, like this maybe:

jQuery('portfolio-container-style-1').masonry('reloadItems');

So you script might be (and I say MIGHT):

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').masonry('reloadItems');
  });
}(jQuery));
</script>

However, it is also possible it uses the Isotope relayout function:

http://isotope.metafizzy.co/v1/demos/relayout.html

Like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    jQuery('portfolio-container-style-1').isotope('relayout');
  });
}(jQuery));
</script>

[Trevor]

Hi Christophe. I suspect what you will need is a small snippet of javascript and to know how to trigger masonry in the theme. For example:

(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  console.log("ajax complete");
  // load your masonry function here
 });
}(jQuery));

[Trevor]

Hi Greg.

It is a question of figuring out how to re-trigger Masonry. What I do not know is how to do this in Divi, but someone at Divi or on their forums will. It is a question asked quite a few times. The basic javascript required is this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
  });
}(jQuery));

But I do not know what goes in to replace that one line.

[Trevor]

I use the Firefox Web Developer tools and inspect the javascript. (Information -> View Javascript) and then search for masonry(

You had already put this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
      
      jQuery(window).load(function() {
        
      // MASSONRY Without jquery
      var container = document.querySelector('#masonry-container');
      var msnry = new Masonry( container, {
        itemSelector: '.search-results-card',
        columnWidth: '.search-results-card',                
      });  
      
        });
  });
}(jQuery));

And I think it needs to be this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    var container = document.querySelector('#masonry-container');
    var msnry = new Masonry( container, {
      itemSelector: '.search-results-card',
      columnWidth: '.search-results-card',                
    });  
  });
}(jQuery));

Maybe.

[Trevor]

The first thing you need to know is the function that will initialize Masonry on your site, and whether it is available on the search results page. If you gave me a URL, I could find that for you in a few seconds. Then you would need to add a script to your site. For example, if the function were hb_masonry() then this might be the script:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    hb_masonry();
  });
}(jQuery));

[Trevor]

Hi

You blog page uses Masonry to position and size the posts in the grid, so it will be necessary to trigger this script after the S&F Ajax has finished re-loading the grid. At some point you will need to discover what function (name) your theme uses to do this, but that is for later. We have a sample script that you would use to do this, which you would need to load on the search page:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("S&F JS ajax request finished");
    // ** here you need to reload your masonry script **
  });
}(jQuery));

The other thing we need to do is to customize the S&F Pro results.php template. If you have not done so yet, follow the documentation:

https://www.designsandcode.com/documentation/search-filter-pro/search-results/using-a-shortcode/#Customising_the_Results

So that you have a copy of this template file in a search-filter sub-folder your (child) theme folder, ready to edit.

[Ross]

Hi Alaa

The issue here is that the Javascript that is loaded by your site (as with most websites), is only loaded once, when the page is loaded.

When S&F loads in new posts with ajax, your websites scripts are not “reloaded” so it doesn’t know how it should behave with the infinite scroll…

I’m not sure if there would be more issues integrating the two past this point (as you are integrating theme JS with S&F, and its untested) but it looks like for now this is the main issue.

Just to note, you may have already noticed, but your masonry grid does not work correctly after an ajax request is performed, for the same reason above… when new posts are loaded from S&F, your theme must reload the scripts related to masonry and your infinite scroll..

Fortunately, we have a JS filter for this (first question): https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

So you need this part for the script:

//depeding on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practise):
(function ( $ ) {
	"use strict";
	
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		console.log("S&F JS ajax request finished");
		// ** here you need to reload your masonry & pagination/infinite scroll scripts **
	});
}(jQuery));

The part // ** here you need to reload your masonry & pagination/infinite scroll scripts ** is where you should add this code.

The next (potentially tricky) part for you is to find out how to do this with your theme, it might be best to open a support ticket with them and refer them to this thread..

If the above is not possible, then you likely won’t be able to use ajax unless you want to add in normal pagination to your pages.

Hope that helps

[Anonymous]

This is how I got the masonry working:

(function ( $ ) {
	
	"use strict";

	$(function () {
		//detects the start of an ajax request being made
		$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		  console.log("ajax start");

		});

		//detects when the ajax request has finished and the content has been updated
		// - add scripts that apply to your results here
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");

$('#ms-container').imagesLoaded( function() {
var container = document.querySelector('#ms-container');
var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',                
isAnimated: true,
        });
});
// this is to change the text label in search box --this can be omitted
$('label.sf-label-checkbox').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('TL Articles', 'Thought Leadership')); 
});  
// end of change the text label in search box --this can be omitted
      console.log("masonry complete");
			//so load your lightbox or JS scripts here again
		});

		//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");

		});
	});
			
}(jQuery));

[Anonymous]

This is how I am pulling it in:

in the footer:
<script src="<?php echo get_bloginfo('template_directory');?>/library/js/masonry.pkgd.min.js"></script>

In the custom results page:

<script type="text/javascript">
 jQuery(window).load(function() {
// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
 var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',                
});  
});
</script>

I am also pulling in:
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory');?>/library/js/sf-pro-ajax-events.js" type="text/javascript"></script>
which contains:

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	
	//so load your lightbox or JS scripts here again
});

//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");
});

I can’t find anything in the console log that says anything.

[Anonymous]

interesting question
after looking to ryan’s code, i managed to do this with this function

        $(".searchandfilter").on("sf:ajaxfinish",function(){
          var area = jQuery('.isotope-area');
          setTimeout(function() {
            area.isotope({
              itemSelector: '.column',
              masonry: {
                columnWidth: 1
              }
            });
          }, 150);
        });

If this can help somebody else…