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

Question

I installed Foundation 6 using bower . I keep getting a few warning in the console every time I use the Foundation 6 - JavaScript based plugin .

Exact warning:

Tried to initialize magellan on an element that already has a Foundation plugin.

My script includes:

 <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 on 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 tried re-installing from scratch, but it still does not work. A similar question exists in the Zurb Foundation forum, but there is still no good answer.

How to resolve this?

Answer 1

Although I mentioned the answer in comments about the question a long time ago, I thought it was better to write it in a few more points.

When installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page that has a <script> tag that links to an external js file located in root\js\app.js , app.js file by default has the following code:

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

So, you already have everything to start.

But that wasn't how it worked until Foundation 6 and I knew about these changes. I did not go through the contents of app.js since I assumed it was empty . I just made the old way to call them in my html pages by writing the following code:

 <script type="text/javascript"> $(document).foundation(); </script> 

This double type refers to elements of the jQuery-based Foundation element, creating a warning in the browser console.

The solution was to remove any of the calls , but actually deleting the code written in the external js file makes more sense for the following reasons:

• External links require an additional http request, which greatly increases the loading time of precious pages. Why not reduce it if you can.
• Calling jQuery-based elements on the site should be done as early as possible so that each element gets its original form in an instant. Therefore, it makes sense to mention the call in the html page, rather than requesting an external file for the call.

So, delete the code specified in the external js file , i.e. your app.js file. The warnings disappear.