Forums › Forums › Search & Filter Pro › Reload masonry grid after Ajax call
Tagged: ajax, masonry grid
- This topic has 10 replies, 3 voices, and was last updated 6 years, 8 months ago by Anonymous.
-
Anonymous(Private) March 7, 2018 at 2:08 pm #164550
My search/filter results are being displayed in a masonry grid. I want to use Ajax to display my results but the masonry grid doesn’t reload after the ajax call. I need to reload the grid after the ajax call. Is there any place I can add a function to reload the masonry grid?
Anonymous(Private) March 7, 2018 at 4:17 pm #164567It’s a custom theme I am building using the Genesis Framework.
I found your FAQ on this issue so I tried to implement your recommendation.
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){ console.log("ajax complete"); //so load your lightbox or JS scripts here again $container.masonry('reloadItems') });
I’m seeing the log statement, but I am getting the error:
Error: “cannot call methods on masonry prior to initialization; attempted to call ‘reloadItems’”
The Masonry Grid documentation covers that how to make sure your grid is initialized before calling a method, but I’ve followed that exactly and I am still getting the error.
https://masonry.desandro.com/faq.html#call-methods-error
I’ve tried all sorts of variations on this, but I am not having any luck.
This is what I have now:(function ($) { var $container = $('.grid'); $container.imagesLoaded(function () { // INITIALIZE MASONRY $container.masonry({ itemSelector: '.entry', columnWidth: '.entry', gutter: 40, }); // Masonry has been initialized, okay to call methods $(document).on("sf:ajaxfinish", ".searchandfilter", function () { console.log("ajax complete"); $('.grid').masonry('reloadItems'); }); }); }(jQuery));
I’d appreciate any ideas of where I might be going wrong.
And thanks for the quick responses. I really appreciate it!
Anonymous(Private) March 7, 2018 at 4:36 pm #164593Ideally, I’d like to get this working with Masonry since it’s packaged with WordPress and a lot of people use it, I feel like I may run into this issue again.
I’ll see what I can find out on my own and I’ll let you know if I get it sorted.
I’ll also check out Salvattore. I hadn’t seen it before, but I like the idea of a CSS-driven configuration.
Ross Moderator(Private) March 13, 2018 at 8:52 pm #165867Hi Laura
Is
$container
, something that is updated/replaced in the ajax area?Then likely
$container
is replaced, and effectively masonry won’t exist on the new content, so callingreloadItems
will throw this error (this is of course all theory)..I had a quick look at the code and wrote the following which I think should work, although untested:
(function ($) { function loadMasonry(){ //$container will always be a new copy var $container = $('.grid'); //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'); }); } //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(); }); }(jQuery));
Hope that helps
Thanks
-
AuthorPosts