Menu icon Foundation
'$' is not defined jquery/ App.js error.

Hi guys, 

I've been away from Foundation for a while. I just booted it up for a personal project and I can't seem to get the App.js file to work.

I keep getting a "$" is not defined error. I can get it to work by adding my script to the bottom of my HTML so I know Jquery is loading. 

Here's what i've tried.

This works....

   <script>
      $(document).ready(function() {
      alert("document ready occurred!");
    $('a').click (function() {
        alert("a link was clicked");
    });
});
      </script>

 

and this doesn't. (in the app.js file)

$(document).foundation();

$('a').click (function() {
    alert("a link was clicked");
});

am I missing something obvious? Am I going crazy?

$jqueryapp.jsjavascript

Hi guys, 

I've been away from Foundation for a while. I just booted it up for a personal project and I can't seem to get the App.js file to work.

I keep getting a "$" is not defined error. I can get it to work by adding my script to the bottom of my HTML so I know Jquery is loading. 

Here's what i've tried.

This works....

   <script>
      $(document).ready(function() {
      alert("document ready occurred!");
    $('a').click (function() {
        alert("a link was clicked");
    });
});
      </script>

 

and this doesn't. (in the app.js file)

$(document).foundation();

$('a').click (function() {
    alert("a link was clicked");
});

am I missing something obvious? Am I going crazy?

ThatGuy over 1 year ago

Maybe these ZenDev videos by Kevin Ball can guide you the right way. They explain how to use the new javascript module binder. 

https://www.youtube.com/channel/UCbTe5XuBgTL_0x8Dd1CsEKQ

 

 

Aaron Neeley over 1 year ago

Thanks @ThatGuy! First off, great videos and super helpful. It wasn't an exact solve more problem but definitely put me in the right direction.

Turns out i need to add this piece to my ESlint config. It was block the compiler. 

{
    "parserOptions": {
        "sourceType": "module",
    }
}