I installed Foundation 6
using bower
. I keep getting multiple warning
in the console every-time I use any Foundation 6 - JavaScript based plugin
.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js
at line 180
:
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing
from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?
Best Answer
UPDATE
For Version 6.4.*, all
plugins
andjs
based elements tend to work only if$(document).foundation();
is mentioned within thehtml
file. So delete it fromapp.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
usingbower
(command line), it gives you a niceindex.html
page to get started which has the<script>
tag that refers to anexternal
js file located atroot\js\app.js
. Theapp.js
file by default has the following code: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 myhtml
pages by writing the following code: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:http
request, very slightly increasing the precious page load time. Why not reduce it, if you can.app.js
file. The warnings would vanish.plugins
andjs
based elements tend to work only if mentioned within thehtml
file.