JS conflict between Foundation 6.6.3 and WordPress Plugin


After some days of debugging, I’ve come across the root problem to an issue and am unsure how to approach from here - mostly curious if this has been seen before, if it’s considered a Foundation bug (I believe it is), or if there is some other way around the issue.

I work on a team that builds/designs for WordPress, we have a boilerplate theme based off of Foundation and also some plugins of our own. One plugin is called Courier Notices. Notices can be displayed in the header, footer, or as a modal. As much as we love Foundation, it is not tied to Foundation by any means. It’s built to work standalone.

The problem we came across is seeing the modal appear twice. After quite a bit of time debugging our plugin we found the root of the problem to be that we display the modal with window.onload (https://github.com/linchpin/courier-notices/blob/5e276c534913413da0b7cdb80ecbd28153f1c3d7/assets/js/frontend/modal.js#L13) but in the Foundation Sites node_module foundation.util.triggers.js:246, an onLoad listener is added which causes our modal to fire a second time. I’ve confirmed by commenting out the onLoad within Triggers.init and recompiling the theme’s JS.

To me, this seems like a bug within Foundation as the Foundation listener should only trigger Foundation elements.

Has this issue been seen before?

It’s not a bug in my opinion. We wait until the page is fully loaded. Do you load foundation.min.js in the footer (right before </body>) like it should be done in general?

Using window.onload is not a good way. For jQuery there is a better way: https://api.jquery.com/ready/

We’re trying to migrate off being so reliant on jQuery, so while there are large chunks of jQuery we’re working our way toward a Vanilla JS approach. We did hotfix to a jQuery approach but I will check on your suggestion, I believe the theme does minify the JS together so that very well may the issue if the theme’s JS isn’t loading in the correct location