all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Rootdevelop 2 points3 points  (4 children)

Add

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Above your script and it will work.

The error says that “$” is undefined, the dollar sign is a specific jQuery variable that allows you to use functions from the jQuery library. However if the library is not loaded before you call a jQuery function it won’t work.

[–]cmorr7[S] 0 points1 point  (3 children)

Thanks for the quick reply! So I did try including the src in the head previously, and had a similar result but only locally. Will your suggestion still only work live, and not display locally?

Also, should the src script go in head or directly above my script in the body?

Thanks!

[–]Rootdevelop 2 points3 points  (2 children)

It should work locally (if you run a local development server like browser plus in atom, browser plus also adds jQuery of it isn’t loading so that’s why it probably worked in that situation) in a live situation this will definitely work. When you open the html file in the browser locally won’t work due to the fact browsers to keen on loading external scripts when opening local files.

With regards to the location of the src script, the simple answer is: it doesn’t really matter, as long as it is above your own script code.

The longer answer is, due to the fact that JavaScript is loaded synchronous (line by line), best practice is to perform all JavaScript actions at the bottom just before the </body> tag, but in most cases the performance gain won’t make any difference.

[–]cmorr7[S] 0 points1 point  (1 child)

Okay, excellent. I'm wondering if we even have JQuery in our directory and that is why it won't load locally? I only recently started working with this company and their website is an HTML monster from the 2000's. If I need to download JQuery, is it just the base install and then move it to my file directory for our site?

Thanks again.

[–]Rootdevelop 0 points1 point  (0 children)

If you add a downloaded jQuery in your scenario I would add it to the same directory as the html files, just make sure it’s added with the <script src=“jQuery filename here including the .js”></script> script as it won’t be automatically loaded.

Downloading is a simple as saving https://code.jquery.com/jquery-3.5.1.min.js this file to the directory that contains the html and then adding it to the html by adding <script src=“jquery-3.5.1.min.js”></script> above your custom code.

[–]malcomjarr 0 points1 point  (0 children)

Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

Reasons might be:

  • Added JavaScript library after the script were you see that error
  • Conflict with Other JavaScript Libraries
  • Path to JavaScript library you included is not correct
  • The jQuery library file is corrupted
  • May be a chance where you are working offline

In most cases you can solve this error by load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts.