We Keep Coding

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

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?

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 and js based elements tend to work only if mentioned within the html file.

The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2

Jquery DataTable Script Loaded but Not Available On Browser DOM

I have referenced jqyery dataTabes and JS.
The results hows that call went ere but will im unable to find DataTable there and shows it as result.
<link href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
In Browser :
although the JS / CSS loads
But still it doenst exist on DOM , so when i try to apply it to any element it doesnt apply.
So what is the error why its not being applying in DOM of browser or from code

DataTable is a jQuery plugin so you need to make sure you are also including jQuery on your page. jQuery will need to be included before you include DataTables. Then to initialize DataTables, you'll need to use $('<table selector>').DataTable(), making sure to insert the real selector for your table.

Problem was the jquery reference , i was referencing to jquery 2.1.1 and 2.1.4 version of jQuery. removing 2.2.1 made it worked

Javascript not loading wordpress footer

I recently started learning Javascript. I am trying to add a small script to the footer of a page on my Wordpress site. I am using the "insert headers and footers" plugin. However, the script does not seem to load. I do not believe it is a syntax issue, since a similar script works on a different site. However, I cannot figure out what is different here. When looking at the inserted script in chrome inspector, inside of the script seems to be just plain text (not colored javascript code). Is there something I can do to fix this and make the script run?
Link to the page: http://memories.uvaphotography.com/home/services/
Javascript code I am trying to insert:
<script>
$("#reply-title").hide();
</script>

jQuery in WordPress runs in noConflict mode which means the global $ shortcut for jQuery isn't available. Replace your code with the following:
<script>
jQuery(document).ready(function($) {
$("#reply-title").hide();
});
</script>
Inside the document ready wrapper the $ can be used as an alias for jQuery.

The reason that you're not seeing your script execute is because jQuery isn't assigned to the $ variable.
When viewing the element inspector console on your page there's a javascript error
Uncaught TypeError: undefined is not a function
When I run the same script via console replacing $ with jQuery the #reply-title is hidden successfully.

Run JavaScript inside of Wordpress

I am trying to get the truck to drive across the screen Directly under my nav menu in Wordpress. The code executes perfectly in js fiddle , but when I try to load the JavaScript file, all I get is a still image (JavaScript is not loading)
Here is the working js fiddle:
http://jsfiddle.net/J2RPq/60/
Here is the code I applied to page.php:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script>
<div id="animate">
<img id="plane" src="http://thumb10.shutterstock.com/thumb_small/507037/507037,1274380827,2/stock-vector-black-and-white-big-rig-silhouette-53528596.jpg" /></div>
</script>
CSS
css :#animate { position: relative;}
Can someone help me with this error?

Regarding jQuery and Wordpress...
First, you should never load jQuery using the <script> tag when using Wordpress. Wordpress has it's own method for how stuff should be loaded. You can read more about there here: http://matthewruddy.com/using-jquery-with-wordpress/
Second, you may already have jQuery loaded in your Wordpress. Wordpress themes frequently already have jQuery installed, but it runs in No Conflict mode. This means that instead of using $ in your functions, you need to write out jQuery.
Hopefully that gives you a starting point troubleshoot...

You shouldn't need to load jQuery, WordPress should load a version already.
You have an extra </script> at the end of your html that doesn't appear to belong.
Make sure you place your script tag <script src="//pimpdaddy1337.com/wp-content/themes/twentytwelve-child/john.js"></script> inside of your <head> tag in header.php, try right before the line </head>.
Make sure your div is placed in page.php (assuming that's the correct template file). You should be able to see it even if the script isn't firing, and if you can't there is some other problem.

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?

It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.

To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/

Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.