3

I have a Masonry Grid that is working beautifully. It loads perfectly and readjusts. But I am using a plugin that filters results (Search & Filter plugin for Wordpress) and uses AJAX to do that. But after the AJAX call, my masonry grid is no longer working. I know it is due to the fact that I need to reload Masonry after the AJAX call, but I don't exactly know how to do that. Does anyone know how I can do that?

Here is my basic HTML structure. 

<div id="masonry-container>
     <div id="search-results-container" class="masonry-brick">
       <h2>Title</h2>
       <img src="myimage.jpg">
       <p>Content</p>
</div>
</div>

.search-results-container is the div that repeats.

My JS looks like this:

    jQuery(window).load(function() {


      var container = document.querySelector('#masonry-container');
      var msnry = new Masonry( container, {
        itemSelector: '.search-results-card',
        columnWidth: '.search-results-card',                
      });  

});

That works well until the AJAX is initiated and reloads the container. Then the Masonry calculations are off and everything is out of whack. I need to figure out a way to reload Masonry after the AJAX call. Any ideas?

Lazerbrains
  • 149
  • 1
  • 3
  • 13

1 Answers1

3

You will want to call the reloadItems() method on your Masonry instance. This will kick off the DOM recalculations:

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

Cody Caughlan
  • 32,456
  • 5
  • 63
  • 68
  • Where would I put that code? I tried it before but not sure I was using it correctly. – Lazerbrains Dec 20 '16 at 23:34
  • You'd put in in your AJAX success callback handler, so when you successfully fetch those items and update the DOM you need to call this method to have Masonry work its magic – Cody Caughlan Dec 22 '16 at 00:01
  • What if there is a `textarea` on one of the blocks and the user drags the `textarea` box bigger. How would one refresh the masonry grid? – deanwilliammills Jan 15 '20 at 13:30