Foundation 6 - Console Warning : Tried to initialize magellan (any JS plugin) on an element that already has a Foundation plugin
UPDATE
For Version 6.4.*, all plugins
and js
based elements tend to work only if $(document).foundation();
is mentioned within the html
file. So delete it from app.js
if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments
of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6
using bower
(command line), it gives you a nice index.html
page to get started which has the <script>
tag that refers to an external
js file located at root\js\app.js
. The app.js
file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js
as I was assuming it to be empty. I simply did the old way of invoking them in my html
pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning
at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external
js file makes more sense for the following reasons:
- External references cost an additional
http
request, very slightly increasing the precious page load time. Why not reduce it, if you can. - Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your
app.js
file. The warnings would vanish. - For Version 6.4.*, all
plugins
andjs
based elements tend to work only if mentioned within thehtml
file.