Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Foundation 5 possible Bug : Uncaught TypeError: Layer must be a document node foundation.min.js:8

I'm trying for the first time the Zurb Foundation 5 framework and I got this error: "Uncaught TypeError: Layer must be a document node foundation.min.js:8"

This happened because I had this in the :

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

When I moved it to the body, the error is gone.

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

like image 245
Mário Avatar asked Nov 22 '13 18:11

Mário


2 Answers

This is a bug that was resolved in a recent commit that was merged into what will be v5.0.3. Just include that commit manually or wait until the v5.0.3 release and you should be good to go.

What's Going On

Foundation now initializes immediately from wherever you load the file instead of waiting for the DOM to load. For increased mobile performance, Foundation 5 embeds a library called FastClick and tries to attach it to document.body on initialization, so if you execute the JavaScript in the <head /> before the <body /> has rendered, FastClick throws that error.

If you're using Rails Turbolinks, Flask Turbolinks, or any similar library that replaces the <body /> dynamically, you'll need to keep your JS in the <head />

like image 66
fny Avatar answered Sep 20 '22 05:09

fny


Most probably 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 the error like:

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

You have to move <script> line which includes foundation.js to body part, just before other script tag. As it is described in documentation. It is not a bug but it is a matter of script ordering/execution and dependencies. See load and execute order of scripts and other linked Q&A. And jquery.js has to be included before foundation.js library.

like image 21
Anto Jurković Avatar answered Sep 20 '22 05:09

Anto Jurković