Hi
If I switch off Ajax, then the results load correctly. I can see that you have customised the results.php file.
The problem is that you are loading the posts using Avada’s theme code, and this uses Masonry/Isotope to reload the grid. The Avada code does not use the normal Masonry methods/code to do this. Other users of Avada and Search & Filter Pro have asked them for help but they have not provided the necessary code.
What I need to know is the necessary javascript to recreate the masonry grid when Ajax is used to reload the results.
Until they can supply that, using Ajax isn’t going to work properly.
AnonymousInactive
My blog with a filter is using Jquery Isotope for it’s layout. I’m using the infinite scroll feature to ajax load more posts.
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log('ajax complete');
$grid.isotope('reloadItems');
});
Is there an array of the next posts to load so that I can the isotope append feature instead of reload? The reload method means the pages jumps whereas the append method just flows from the bottom of the last post.
https://isotope.metafizzy.co/v2/methods.html#appended
OK. I can see why. Your theme is using a script call Masonry to load the images, which is totally unnecessary where the ‘grid’ is one per row. This script is used to re-arrange posts in a multi column grid, normally.
I can’t see what is happening because you are using (maybe autoptimize?) a plugin to minify and combine all the javascript.
You don’t seem to have a search text field in the form on that page? That would be the best thing to do. Also, there are gaps in the grid, suggesting that you might be using Masonry or something similar to arrange the posts?
AnonymousInactive
For those who may be interested,
I find my way with this
$j(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
//console.log(“ajax complete”);
/* Masonry */
$j(‘.posts-container’).masonry(‘reload’);
});
Are you able to describe what is going wrong? For example, some post grids use Masonry or Salvattore to put the posts into columns so that rows do not leave spaces underneath individual posts, which gives the grid a much tidier ‘look’.
The script that does this has to be re-triggered after our Ajax has run.
It is not possible to emulate/copy that sample page as it comes from Avada’s fusion grid builder and uses Masonry to arrange the posts. Our plugin does not come with a grid builder. Instead, where we encounter page/gird builders, we investigate to see if we can get our plugin working with them. Usually, this requires the Theme or Plugin builder to provide help, either as generic help documentation, hooks in their code that we can use, maybe direct replies to help us providing the needed code, or, if we are lucky, they actually use the WordPress Codex methods for fetching posts.
So, we have asked for help from Avada. Their code is not documented and does not have hooks we can use. They do not appear to use standard query methods.
We have a standard method to join our plugin to most themes/plugins like Avada, but that does not work either in their case.
Understanding that you chose Avada for a reason to meet your needs, the alternative is to use a Page/Grid Builder plugin. At this time, we do support Visual Composer. It needs to be the standard version, and not a modified (theme) version. Some themes bundle it relatively unmodified and that works OK, some themes bundle it but heavily modify it, and it does not work. This post explains more:
https://support.searchandfilter.com/forums/topic/pagination-not-working-11/#post-105228
Does Salient include Visual Composer, if so, which version, and does it have the original Visual Composer Post and Media Grid elements (and their Masonry equivalents)?
It appears to be this #index-702374, but I can see isotope bits everywhere, and that means this grid is made using Masonry, and that may be very hard to get working with Ajax content refreshing, as the Masonry script needs to be re-triggered using a javascript, which we give details at the top of our FAQ page.
Your theme author may be able to give you the code needed to fit into the ajaxfinish version of the scripts shown.
Is this using a Visual Composer grid? If it is, Is it using the Post Grid (or Masonry Grid)? I think the Post Grid element icon is orange?
