Hari Harker Hari Harker - 3 months ago 45
Javascript Question

Foundation 6 - Console Warning : Tried to initialize magellan (any JS plugin) on an element that already has a Foundation plugin

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?

Answer

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), the app.js file inside the root/js folder is pre-loaded with the following code:

$(document).foundation(); //invoke all jQuery based foundation elements

I didn't go through the contents of app.js as I was assuming it to be empty, I simply referred them in my html pages. Also, I had written the following code in my html pages:

<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:

  1. External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
  2. 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 the external js file, that is your app.js file. The warnings would vanish.