Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJonathan Grieve
Treehouse Moderator 91,253 PointsNew problem when changing to foundation.min.js
Hello again :)
This is a confusing one. I've changed over the path to the file in functions.php to foundation.min,js but it's still throwing a console error.
Here's what it says.
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ foundation.min.js?ver=4.3.1:8
app.js?ver=foundation_js:1 Uncaught ReferenceError: $ is not defined
I think the version number has a lot to do with it. Has Foundation been updated too much since the video came out? I don't know how to fix it.
<?php
function wpt_theme_styles() {
wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
//wp_enqueue_style('normalise_css', get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style('fontcss','http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
wp_enqueue_style('style_css', get_template_directory_uri() . '/style.css');
}
//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
function wpt_theme_js() {
wp_enqueue_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
wp_enqueue_script('foundationmin_js', get_template_directory_uri() . '/js/foundation.min.js', 'jquery', '', false);
wp_enqueue_script('main_js', get_template_directory_uri() . '/js/app.js', 'jquery', 'foundation_js', '', true);
}
//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_js');
?>
app.js
```javascript
$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);
return false;
});
I think it means i have to edit jquery somewhere i'm not sure how to do it.
5 Answers
Craig Watson
27,930 PointsHi,
WordPress comes with jQuery, so you shouldn't have to worry about that. Have you tried changing the boolean value on the end to true for foundation and modernizer ?
Craig
Andres Altuve
16,274 PointsIf im not mistaken the error is because you don´t have jquery in your theme directory, download it from jquery.com and add it before foundationmin_js.js
Jonathan Grieve
Treehouse Moderator 91,253 PointsWordpress has jquery installed automatically so it should pick it up. I did figure out that I needed to use no conflict jquery along a minor change to my functions.php file but I'm still left with the following console error.
Uncaught ReferenceError: jQuery is not defined(anonymous function) @ foundation.min.js?ver=4.3.1:8
Or have I got it wrong? There's no direct linking to jquery in the videos.
Thanks :)
Jonathan Grieve
Treehouse Moderator 91,253 PointsIt doesn't want to work. Hmmm it's a tricky one. It's been just under a year since the course came out. Has there been some sort of update i wonder that requires a new work around? I'm sure I've got the code right now :)
Jonathan Grieve
Treehouse Moderator 91,253 PointsI'm using WordPress locally. Does clearing the cache matter in that case?
Anyway thanks for trying. Maybe we need Zac Gordon 's expert advice ;)
Craig Watson
27,930 PointsYes the files will still be cached by the browser, I had some similar trouble doing the bootstrap course.
Jonathan Grieve
Treehouse Moderator 91,253 PointsStill nothing. Gonna take a break from this and maybe the answer will come later. Slow progress today but hopefully will learn from this :)
Jonathan Grieve
Treehouse Moderator 91,253 PointsBy the way this my updated code for the functions.php and app.js file. Matches the video
function wpt_theme_js() {
wp_enqueue_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', true );
wp_enqueue_script('foundationmin_js', get_template_directory_uri() . '/js/foundation.min.js', 'jquery', '', true);
wp_enqueue_script('main_js', get_template_directory_uri() . '/js/app.js', array('jQuery', 'foundation_js'), '', true);
}
//hook - tell wordpress when to call the function
add_action('wp_enqueue_scripts', 'wpt_theme_js');
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
$(document).foundation();
$( ".nav-toggle" ).click(function() {
$(this).toggleClass("open");
$("nav").fadeToggle(100);
return false;
});
});
jess irg
1,150 PointsThis fix totally worked for me. Thanks!
Marius Wallin
11,464 PointsIf it helps, the only workaround for me was to copy the functions.php file and index.php file from the downloads. Didn´t find the issue in my writing. (got no errors).
Samuel Feraci
Courses Plus Student 5,981 PointsThe only thing that worked for me was copying over the functions.php in the downloads file. This was driving me nuts...
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsI have before, yes. :-) Let me do that again just now...
No affect unfortunately.
Craig Watson
27,930 PointsCraig Watson
27,930 PointsI am just looking on the codex and and it is using jQuery all in lower case within the dependencies explanation ....
fingers crossed :)
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsIt doesn't want to work. Hmmm it's a tricky one. It's been just under a year since the course came out. Has there been some sort of update i wonder that requires a new work around? I'm sure I've got the code right now :)
Craig Watson
27,930 PointsCraig Watson
27,930 PointsI think I have spotted it, its in your dependencies the name of foundation is foundation_js but you names it as foundationmin_js when you enqueue it.
Well I think I have it lets see lol
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsStill nothing I'm afraid.
I have gone ahead though and set up the menu area for that part of the video. I feel like I've achieved something now :) But the menu doesn't appear yet when i click the hamburger button.
I have made sure those dependencies match now but still no difference. Hmmm
Uncaught ReferenceError: jquery is not defined(anonymous function) @ app.js?ver=4.3.1:1
Craig Watson
27,930 PointsCraig Watson
27,930 Pointswe seem to be getting there because the error has changed to a line of code further down. I cant spot anything else that cause a problem.
The only thing that comes to mind now is clearing the cache or if on chrome try the sit in incognito mode :S
sorry i cant be of much help
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsFIXED :)
After a few minutes away I had a thought. I had looked at the no conflict wrapper before and tried
only with both jquery and jQuery in line 1 of the no conflict code. But I had a feeling if I looked at the documentation it would work. We got there in the end thanks for your help :)
Craig Watson
27,930 PointsCraig Watson
27,930 PointsHi Jonathan,
Glad to here it is fixed and you can keep going!
Craig