All geek questions in one place

Foundation 5 Possible error: Missed TypeError: Layer must be a document node foundation.min.js: 8

I am trying to create a Zurb Foundation 5 database for the first time, and I got this error: "Uncaught TypeError: Layer must be a document node foundation.min.js: 8"

This happened because I had this in:

<script type="text/javascript" src="libs/foundation.min.js"></script>

When I moved it to the body, the error disappeared.

Why? Am I missing something about javascript or is it a bug?

+6
source share
2 answers

This is a bug that was resolved in a recent commit , which has merged with what will be v5.0.3 . Just enable this command manually or wait for the release of version v5.0.3, and you will be well off.

What's happening

The foundation now initializes immediately from where you download the file, rather than waiting for the DOM to load. To improve the performance of mobile devices, Foundation 5 embeds a library called FastClick and tries to attach it to document.body during initialization, so if you execute JavaScript in <head /> before rendering <body /> , FastClick throws this error.

If you use Rails Turbolinks , Flask Turbolinks or any similar library that dynamically replaces <body /> , you need to save JS in <head />

+8
source

Most likely your html file was something like this:

 <!doctype html> <html> <head> <title>Title</title> <script src="../js/jquery.js"></script> <script src="../js/foundation.min.js"></script> </head> <body> <script> $(document).foundation(); </script> </body> </html>

And you got an error, for example:

 Uncaught TypeError: Layer must be a document node Uncaught TypeError: Object [object Object] has no method 'foundation'

You need to move the <script> , which includes base.js in the body part, before another script tag. As described in the documentation. This is not an error, but the matter is in ordering / executing a script and dependencies. See loading and ordering scripts and other related Q & A. And jquery.js should be included in the foundation.js library.

+2
source

Source: https://habr.com/ru/post/958667/

More articles:


All Articles