FacetWP: Plugin breaks button/modal functionality inside searchable content area

Question

I am currently testing the FacetWP trial with two facets on a post archive page, using the WP-show-posts plugin for displaying posts and modal-video.js (https://github.com/appleple/modal-video) for modal functionality. Everything works great until FacetWP sorts the content, after that it breaks all buttons activating the modal-video.js modals.

Here’s a short video of what I mean: https://vimeo.com/349432438

I suspect that by adding a bunch of classes, ids and jquery to the exisiting content/page, FacetWP breaks the already existing scripts that work for the buttons and modals (regarding modal-video.js). But so far I can’t determine where the error is coming from and how I can make the modal plugin work together with FacetWP.

I guess, that since the buttons are inside the content/divs that get refreshed, they are affected once FacetWP does its thing.

I already tried using their documentation from here, disabling auto refresh after every interaction, which does not work: https://facetwp.com/how-to-disable-facet-auto-refresh/

With all the buttons that break, I also checked the console for erros, but no errors or missing instances seems to appear.

Since I am hesistant to fork over 99 dollars just to get to their support line, without guarantuee that the plugin works for me, I am trying my luck here. Maybe someone around here has experience with FacetWP and its refresh function and how it works with other javascript/jquery plugins.

Answer 1

Try adding this to your JS file. I have the same issue as you described. After I sort, the sorted content contains links with a click function (get data attribute and launch modal to play video) that stops working and no errors. But when I refresh, it works. It might not be as slick with the page refresh, but my function now works.

  $('.facetwp-facet').click(function() {
      setTimeout(function() {
        location.reload();
      },500);
  });