Ajax refresh destroying isotope grid layout

[Jennifer]

On https://garfieldconservatory.org/staging/events/, I’m using FacetWP to add filtering to the events grid. Whenever a filter is selected (and the results refresh via ajax) the grid layout goes away. (It comes back with a hard refresh) This is related to the isotope code within tribe-events-photo-view.js. Ideally I’d re-initialize Isotope within the facetwp-loaded event, but I can’t seem to access tribe_setup_isotope() since it’s within an anonymous function. Is there a way to programmatically re-trigger isotope?

Please let me know, thank you

[Nico]

Howdy James,

Welcome to our support forums and thanks for reaching out to us. Interesting issue, I’ll help you out!

On the top of my head I think that triggering a window re-size event on the facetwp-loaded event should work. Can you give that a try and let me know about it?

Best,
Nico

[Jennifer]

Hi Nico,

Sadly, no dice… the easiest way to “trigger a window resize event” is to just resize the browser window.

After clicking on a facet, I tried resizing the window (e.g. shrinking the width). Nothing changes unfortunately.

The only way I’ve been able to get the layout back is through a hard refresh. Please let me know.
Thanks

[Nico]

Thanks for following up on this James!

I was taking a look at how your filters work and I guess that what’s happening here is that the tribe-events-photo-events div is getting reloaded completely. Could you try to just load the results in it but not the div itself?

As you say tribe_setup_isotope is not a function you can trigger, but I guess that if the tribe-events-photo-events div is not removed/added after the load then the risize approach might work.

Please let me know about it,
Best,
Nico

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts