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 trial

HTML Prototyping with Foundation for Apps Finishing the Prototype Notification Component

Posted by Team Melon
Team Melon
3,855 Points

How to use jQuery within Zurb Foundation for Apps?

Basically I know jQuery and just really want to get it to work with Foundation for apps and will follow any method you can provide to make that happen. I've looked through a bunch of links online like "http://foundation.zurb.com/forum/posts/21714-how-do-i-use-jquery-with-foundation-for-apps" but with no luck.

Zurb foundation for apps uses angular.js and I cannot find a way to override this and be able to use jQuery (or Javascript) in my application.

My head file looks like this

<link href="./assets/css/app.css" rel="stylesheet" type="text/css">
<script src="./assets/js/foundation.js"></script>
<script src="./assets/js/templates.js"></script>
<script src="./assets/js/routes.js"></script>
<script src="./assets/js/app.js"></script>

I have edited the gulp.js file to look like this:

  // These files are for your app's JavaScript
  appJS: [
  'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
  'node_modules/autosize/src/autosize.js',    
  'client/assets/js/app.js',
  ]

So for example: If I would like to use something like this:

jQuery(window).scroll(function() {     
    var scroll = jQuery(window).scrollTop();
    if (scroll > 140) {
        jQuery('body').addClass('active');
    }
    else {
        jQuery('body').removeClass('active');
    }

At this point I get major errors such as:

app.js:17SyntaxError: Unexpected token ','. Default values in destructuring parameters are currently not supported. foundation.js:9253Error: [$injector:modulerr] Failed to instantiate module application due to: [$injector:nomod] Module 'application' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Can anyone explain how I can implement jQuery functions within this project?

2 Answers

Micah Courey
Micah Courey
20,168 Points
Micah Courey
Micah Courey
20,168 Points

jQuery needs to be added to the page before your Angular app is boostrapped.

Make a new project:

foundation-apps new test
cd test

Install jQuery:

bower install jquery --save

Then add jQuery to the app.js file specifically:

// Gulpfile.js, line 43
var appJS = [
  'bower_components/jquery/dist/jquery.js',
  'client/assets/js/app.js'
];
Team Melon
Team Melon
3,855 Points

I have followed your instructions and we're trying to test if jQuery is working. Currently we have posted this in the index file as a test:

<script type="text/javascript"> jQuery(function() { jQuery(window).scroll(function() { var scroll = jQuery(window).scrollTop(); if (scroll > 10) { alert(); } }); }); </script>

We also put the function into the app.js file.

I am not getting any errors but I am also not seeing any confirmation or reactivity that jQuery is working. Is there a test you did or is there something we're overlooking on how we implement jQuery now that it has been added to the project?

Thanks so much for your help.

Jacob Mishkin
Jacob Mishkin
23,118 Points

I checked as well, and this code seems to be the only answer out there.

Micah Courey
Micah Courey
20,168 Points
Micah Courey
Micah Courey
20,168 Points

I haven't tried it out yet, I just watched this couse today as well. Angular can use jQuery if it's present in your app when the application is being bootstrapped and Foundations for Apps uses AngularJS.