Question

192

Uncaught ReferenceError $ is not defined

rated 0 times [ 193] [ 1] / answers: 1 / hits: 20883 / 12 Years ago, tue, july 10, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 12 Years ago markusdamienn · Accepted Answer

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);

   });

});