scotchpasta scotchpasta - 1 month ago 26
Javascript Question

Foundation not being recognized for some reason

I'm trying to do a simple dropdown menu in foundation with the following as a test just to get it on the page.



<a data-dropdown="drop2" aria-controls="drop2" ariaexpanded="false">Has Content Dropdown</a>

<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
<p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>





I keep getting hit with the error
TypeError: Cannot read property 'className' of undefined
. In the call stack, it shows
foundation.js:195
at the top of the stack.

Screenshot of error.

It looks to me like
foundation.js
is not actually being loaded properly, but seeing as this is my first app using it I'm not entirely sure. Any ideas?

Answer

The issue you're facing appears to be due to a mismatch between the version of foundation.js you're loading and the version of the tutorial which you're following.

If you're following a tutorial for foundation.js 5.5.3, be sure that the script you're referencing is 5.5.3, whether that be through a CDN or a local copy.

The error you're seeing regarding the className of an undefined was being thrown by the following line in foundation.js which exists in v6.0.0 onwards.

var horizontalPosition = /float-(\S+)\s/.exec(this.$anchor[0].className);

The $anchor in question is a jQuery object whose selector matched any element with a data-toggle or data-open matching the id attribute of the dropdown content.

The API for dropdowns was different in prior versions, hence the mismatch and your error.

$(document).foundation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css" rel="stylesheet" />

<a data-dropdown="drop2" aria-controls="drop2" aria-expanded="false">Has Content Dropdown</a>
<div id="drop2" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.dropdown.js"></script>

Comments