Cant open iFrame after using filter

[Carsten Dülfer]

Hi, please excuse my bad english!

A Google Maps map in an iFrame I have made thanks to a post here in the forum. Now I have the problem that the lightbox does not open after using a filter. I think the best way to describe this problem is to use a link. Further down the page you will find the section “Wasser”. Below are entries with a green button called “Karte öffnen”. I can filter over it above (for example “Wasserspielplätze). If I have previously activated a filter, the map will not  open. Is there perhaps a solution for? Thanks in advance.

Regards Carsten

[Rolf]

Hi Carsten, I can’t check this live (no link) but it sounds like the filter that you describe, is doing an ajax request or otherwise modifies the page DOM tree on the fly. This will cause the FancyBox script to either not be aware of new content or loose track of existing content (after being moved around). The result is then that links are no longer opening in the light box as expected.

There is a way to make Easy FancyBox re-scan a page after new content has been added or changed but it depends on the script that is handling the actual filtering request. Do you know which script is responsible? Is it a theme or a plugin script?

If the theme or plugin is available on WordPress.org then I can do some testing for you. Or I can take a closer look at your live site, if you share a link 🙂 either publicly on this thread or using the contact form (with mention of this thread).

[Carsten Dülfer]

Hello Phareo,
many thanks for your response. I forgot the link, sorry: https://www.bodensee-family.de/ausflugsziele/. The plugin for the filters is https://janthielemann.de/filterable-grid-for-divi/, a special plugin for the Divi Theme. My page is about the maps (green button (see top post)). I’m not a javascript or Ajax expert and unfortunately I’m completely overwhelmed. Thank you in advance .. Greetings Carsten

[Rolf]

Hmmm, I tried to find a hook in the script code that we could use but there does not seem to be anything. Does that plugin (or the theme) come with support that you can contact? If so, the question to ask would be: “Is there an event triggered after clicking a filter button?”

[Rolf]

OK, wait… I might have found a way but you’ll need to add this script to the page:

(function($){
  $(document).ready(function(){
    window.fancybox_pb_jt_filterable_grid_init = function(){
      $(".et_pb_jt_filterable_grid_container").each(function(){
        var observer = new MutationObserver(function(mutations){
          $(document).trigger('post-load');
        });
        var config = { attributes: true, childList: true, characterData: true };
        observer.observe(this, config);
      });
    }
    if ( window.et_load_event_fired ) {
      window.fancybox_pb_jt_filterable_grid_init();
    } else {
      $(window).load(function(){
        window.fancybox_pb_jt_filterable_grid_init();
      });
    }
  });
})(jQuery);

[Rolf]

This code needs to be wrapped in script tags when posted in a text widget or inserted in a theme template file. I cannot post these tags on this forum without them being treated as tags (therefor not showing) correctly. But here the are with extra spaces added right after the first character.

Before the script code:

< script type="text/javascript">

After the script code:

< /script>

Remove this extra space in each one when adding them in the text widget.

But if you paste this code in a dedicated theme field meant for javascript, you probably do not want to add these tags!

[Rolf]

I found a good tutorial about adding code to the page with Divi’s Code Module on https://divilover.com/add-javascript-jquery-code-divi-theme/ (option 1) …

You’ll need to add one Code Module to each page that has one or more filterable grids.

[Carsten Dülfer]

Ok, thanks for your help, the code and the good explanation. I have now installed the code correctly in the head of the page. I hope that’s correct?
It works, wow. Thank you very much, you helped me a lot. If I can do you something good, let me know!

 

[Rolf]

That’s excellent news! Thank you for the feedback. I’m sure others will benefit from this too 🙂

[Author]

Posts