I have an app using Foundation 6, which has a lot of features that needed to be initialized via Javascript. In my main app-body.js template, I call $(document).foundation(); in the onRendered method – often with a setTimeout() – in order to initialize it on the DOM that gets loaded dynamically. It works fine if I go directly to the app, but if I load it in a new tab, wait a few seconds, and then switch over to that tab, none of it is loaded (even if there is a longer setTimeout() calling $(document).foundation() after I switch to the new tab).
When I open the browser console locally, I don’t get an error printed out when I type in $(document), but on the live version I get the following error: Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object HTMLDocument]' is not a valid selector
I’m not sure if this is a jQuery error or just a foundation error, but it’s reproducible both locally and on production. Any ideas how I could fix it?
Update: I’ve done a bit more testing and found that the error I was getting from typing $(document) into the browser console was irrelevant to my issue with Foundation, so now I’m at a bit of a loss.
You can see it in action at flippedart.org - it should appear to load normally if you open it in the current window, but if you open it into a new tab and wait a few seconds before making that tab active, all of the boxes will be smushed on top of each other (but it’s fixed as soon as you refresh the page):
vs.
I’m using Foundation’s “Equalizer” function on the homepage boxes, but the boxes-stacking-on-top-of-each-other issue seems to appear even when I turn Equalizer off. So I’m not sure whether it’s a CSS or JS issue, and would appreciate some help in case there’s something simple that I’m forgetting. Thanks!
As soon as I made that last post, I figured out that the issue wasn’t happening inside the app-body template, but in the homepage template. I still don’t have a good way of knowing when the DOM elements are actually rendered on the homepage, but using a setInterval in order to re-initialize new Equalizer() elements on the homepage at least ensures that this display bug can be solved. Is there anything I have to worry about with garbage collection, if I keep initializing new Foundation elements in the home page (i.e. calling const el = new Foundation.Equalizer($('#home-equalized')); over and over)?
