jQuery() and $() undefined, but jQuery works fine

Question

SOLVED: I am the biggest dumb. I was so focused on where I intended to load my scripts (at the end of the body tag) that I wasn't paying attention to the head anymore.

Lo and behold I was loading my main.js twice, once in the head and once after jQuery loaded.

Thank you to everyone who tried to help, but ya can't cure my tunnel vision :/

ORIGINAL POST:

I am importing jQuery from Google's CDN, and I am loading it before my own js script, but on line 1 I'm getting a "$ is undefined" error with my $(document).ready() function.

This error occurs whether I use $ or jQuery as the prefix.

I've been searching through forums for the past hour and all the solutions that people seem to have is to ensure that jQuery is loading before my other scripts and that it's not being interfered with by other libraries that might be using $, but I'm not using any other libraries, and I've taken the path straight from Google's site

I've also tried using Microsoft's CDN and jQuery's CDN.

I've checked in Chrome, Firefox, and Edge, all the same.

The network tab in dev tools shows jQuery loading first.

<body>

  <aside>
    <div id="nav">
      <h2>ABOUT US</h2>
      <h2 id="donate-button">DONATE NOW</h2>
      <h2>CONTACT US</h2>
      <h2>PHOTO GALLERY</h2>
    </div>
  </aside>


  <!--SCRIPTS-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="Resources/JS/main.js"></script>
</body>

// Resources/JS/main.js

$(document).ready(function() {
  console.log("READY");
  $("#nav h2").css("background-color", "red")
});

All I'm trying to do is get this error to go away so I can actually start writing my script :/

I'm fairly new to JS and jQuery in particular, and I feel like the solution is so simple and I'm just looking in the wrong spots. But I've done a decent amount of searching and I can't find anyone who's solution works for me too.

EDIT:

Here are some screenshots from Chrome Dev Tools that were requested:

Could you please show a screenshot of the error, including the location it says is the cause? You can paste / upload screenshots directly into the Stack Editor — Phil, Jul 18 '19 at 05:57
I just ran your code as is in a snippet and it worked for me. Perhaps try moving the script tags out of the body, but before the closing ` — mullac, Jul 18 '19 at 06:12
_"Perhaps try moving the script tags out of the body, but before the closing ` — Phil, Jul 18 '19 at 06:25
Where exactly in your HTML do you run the `$(document).ready...` code? It should be **after** you include jQuery. — Bram Verstraten, Jul 18 '19 at 06:36
@BramVerstraten it's in their `main.js` file which is included after jQuery — Phil, Jul 18 '19 at 06:40
I created a snippet out of your code, I changed nothing from your initial code. You can see that it works by running it. The error must come from somewhere else. — cloned, Jul 18 '19 at 07:44
Make sure you include jQuery lib **before** any usage of `jQuery` or `$` — Justinas, Jul 18 '19 at 08:10
How are you running it? On file protocol or a server? Do you see anything wrong in Network panel? EG 404? — epascarello, Jul 18 '19 at 21:42

Kyle · Answer 1 · 2019-07-18T08:23:50.017

0

When I come across this issue I make sure to wrap all jQuery code inside the following

(function($){

    // add your code here

})(jQuery);

Or add this before any jQuery

$ = jQuery.noConflict();

EG.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  (function($){
    $(document).ready(function() {
      console.log("READY");
      $("#nav h2").css("background-color", "red")
    });
  })(jQuery);
</script>

edited Jul 18 '19 at 08:23

answered Jul 18 '19 at 08:14

Kyle

302
2
5

Good advice but I don't think this is the problem – Phil Jul 18 '19 at 21:37
Yeah these didn't solve the problem, but can I ask what this does so I know for the future? – TheNobility Jul 19 '19 at 01:28
1

@TheNobility it protects the `$` symbol from being overwritten by other code. You can also use `jQuery(function($) { ... })` in place of this and `$(document).ready()`. See https://api.jquery.com/jQuery/#jQuery3 – Phil Jul 19 '19 at 01:31

score -1 · Answer 2 · answered Jul 18 '19 at 11:40

The general structure of your scripts should look something like this:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

main.js

$(document).ready(function()
{
    console.log("READY");
    $('body').append("It's working.");
});

jQuery() and $() undefined, but jQuery works fine

2 Answers2