Uncaught ReferenceError $ is not defined

Question

I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).

I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.

I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:

<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>

and in my main template (the one that gets rendered on all pages) I have:

<script language="JavaScript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

edit.js:

(even putting it within the script tag directly on the page I want to use it on doesn't work)

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

HTML:

(it's embedded in a larger page)

    <head>
        <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
    </head>
... my html code..
        <div id="wrapper">
           <div id="container">
              <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
              <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
           </div>
        </div>

I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?

My two questions are:

What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?

I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.

Did you make sure that `jQuery` is included **before** `edit.js`? — Andreas Wong, Jul 10 '12 at 01:48
@SiGanteng yes..Its in my primary template that should be rendered first but just in case it wasn't I did add it above my edit.js call(I just copied the googleapis script link above the edit.js one I posted above). Still no luck :-( — Lostsoul, Jul 10 '12 at 01:50
Hmmm ok, looks fine to me :s. By the way, are you picking the `language` attribute from w3schools.com ? It's deprecated. And as a side reading: http://w3fools.com/ — Andreas Wong, Jul 10 '12 at 02:03
@SiGanteng I tried it without the language attribute then tried it with it and same result. Figured I'd post it with that attribute just in case someone asked if I did it. I'll remove the attribute. By the way Marteljn's solution fixed it. I didn't know I needed to wrap it in a `function` tag.. — Lostsoul, Jul 10 '12 at 02:09

root · Answer 1 · 2012-07-10T02:41:56.583

3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Script tag for jQuery should come before your custom javascript.

Follow by edit.js

<script type="text/javascript" src="static/edit.js"></script>

edited Jul 10 '12 at 02:41

answered Jul 10 '12 at 01:48

root

1,573
3
23
38

I just did that, the error is not showing up in chrome anymore but the link(edit button) doesn't work still. – Lostsoul Jul 10 '12 at 01:52
1

You can drop the deprecated `language` attribute; just the `type="text/javascript"` should be enough. – Kevin Ji Jul 10 '12 at 01:56

score 3 · Accepted Answer · edited Nov 02 '16 at 15:36

3

First you need to place the jQuery script tag first.

Second, you need to do one of the following things:

Put your code within this function:

$(document).ready(function(){/*CODE HERE*/});

Or like this:
```
$(function(){
    /*CODE HERE*/
});
```

The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.

Edit:

$(function(){
   $('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
   $('#savevalue').click(function(e){
     var showNew = $('#changevalue').val();
     $('#altervalue').hide();
     $('#storedvalue').show();
     $('#storedvalue span').text(showNew);
   });
});

edited Nov 02 '16 at 15:36

fragilewindows

1,394
1
15
26

answered Jul 10 '12 at 01:52

marteljn

6,446
3
30
43

I'm sorry I don't fully understand. Isn't the edit.js wrapped in $(functionname)..? – Lostsoul Jul 10 '12 at 01:55
Not exactly, place all of your code within one of the blocks above. Using the code above fires a function when jQuery is ready. You are trying to use jQuery before it is ready. I am 100% sure that is your problem. – marteljn Jul 10 '12 at 01:58
wow thank you..it worked!!! I wrapped it in the function tag and it worked! I don't think I ever did that before, I was just copying and pasting the main code directly into a .js file. I'll look at my other files and try to do this as well. Thanks so much. – Lostsoul Jul 10 '12 at 02:07
sorry dumb question..I learn better when I can compare to things I already know..is the `$(function(){` similar to python's `def function:` ? (I think I need to sit down and read a book on javascript) – Lostsoul Jul 10 '12 at 02:10
Yes in the sense that you are writing your code in scope of a function. No in the sense that what is really happening here is you need to make sure the JQuery script is completely loaded before you can execute the code using the `$` object. http://docs.jquery.com/Tutorials:Introducing_$(document).ready() check this link out for further reading. – marteljn Jul 10 '12 at 02:15
Thanks. that link isn't working but I'll search the site. In the code example, I have a form field that is changed without a refresh, if I have multiple items I want to allow to be changed individually would I need to create multiple `function` methods or if its just to make sure jquery is loaded can I just put them all in one of those `function` methods? – Lostsoul Jul 10 '12 at 02:46
_"you need to make sure the JQuery script is completely loaded before you can execute the code using the $ object"_ - No, when included via a standard ` – nnnnnn Jul 10 '12 at 04:05
As you can see from my answer that is exactly what I said. I phrased it that way in the comment to relate back to the error he was getting `$` is not defined. What I said in the comment is consistent with the DOM ready event since the script tag referencing JQuery is indeed a part of the DOM, although you are right it could have been worded better. – marteljn Jul 10 '12 at 12:51

score 2 · Answer 3 · answered Jul 10 '12 at 03:35

2

Try removing the language attribute..sometimes work for me. It's obsolete now .. i think

answered Jul 10 '12 at 03:35

Anirudh Rayabharam

737
1
6
12

This is something that a lot of people will run into if they are using auto completed tags with TextMate or Sublime Text as a lot of the plugin and packages offered still add the language attribute to the script tags. If your JS tag looks like this: `````` I found removing this fixes the problem: `````` – samuelkobe Feb 23 '15 at 19:35

score 0 · Answer 4 · answered Jul 10 '12 at 01:50

0

You need to include jquery before you can use it.

answered Jul 10 '12 at 01:50

Max Hudson

9,961
14
57
107

Uncaught ReferenceError $ is not defined

4 Answers4