javascript $ not defined

Question

I have a webpage where i want to have collapsible headings, I have the below code as an example but for some reason it keeps saying that $ is not defined.

<head>
<style>
tr, td
{
    border: 1px solid black;
}
tr.header
{
    cursor:pointer;
}
</style>
</head>
<body>
<table border="0">
<script>
'use strict';
$('.header').click(function(){

$(this).nextUntil('tr.header').slideToggle(1000);
});
</script>
  <tr  class=".header">
   <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class=".header">
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
</body>

I am wanting when the page loads you just get a list of the headers and then when you click on one it expands

I will presume that David is new to the world of web dev, so to down vote this is just cruel. The guy is at least trying. — gmann1982, Jul 31 '15 at 13:50
@gmann1982 you're right, there are people here that downvote for anyreason.... they should see that he put the code, he explained the question and said the error that he was getting, mcve was ok... but people arent supportive anymore. — Guilherme Silva, Jul 31 '15 at 13:53

atmd · Answer 1 · 2015-07-31T13:59:45.127

6

try adding jquery:

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

Also, you dont prefix classes with . in the html, only in selectors, so change class=".header" to class="header".

Best practices aside, here's a jsfiddle showing the code working, you just need to load the lib and run the script once it (and the dom) are loaded

edited Jul 31 '15 at 13:59

answered Jul 31 '15 at 13:47

atmd

7,034
2
28
62

I would consider placing the script tag at the bottom of the body instead of in the head. Because of [this](http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup). – Gideon Jul 31 '15 at 13:53
no its still not working saying $ is not defined – David Boyd Jul 31 '15 at 13:53
can you update the code in your question and show where you've put the script etc. theres no reason why it shouldnt work if included correctly – atmd Jul 31 '15 at 13:54
@Gideon considering the level of complexity in this question/issue I think perf best practices are too much – atmd Jul 31 '15 at 13:56
Not sure waht the issue was, but when i put the javascript into an external file and referenced it in the HTML it worked – David Boyd Jul 31 '15 at 14:07
glad you managed to resove it – atmd Jul 31 '15 at 14:10

score 2 · Answer 2 · answered Jul 31 '15 at 13:52

For the first problem, did you check that jQuery exists before call your script ?

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Then you can check if jQuery is available with the following method for example :

if (window.jQuery) {  
// jQuery is loaded  
} else {
// jQuery is not loaded
}

Kup · Answer 3 · 2015-07-31T14:21:19.820

1

The $ is a shorthand for the library jQuery so you must import it to the page,

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

edited Jul 31 '15 at 14:21

answered Jul 31 '15 at 13:49

Kup

862
11
30

score 0 · Answer 4 · answered Jul 31 '15 at 13:50

As has been said: You should add jQuery, like this:

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

The reason is: You obviously found some jQuery example somewhere and are trying to make it work.
Without the jQuery libraries, though, $.* has no meaning. It gets the meaning only through the jQuery library.

To learn more, head over to the jQuery website.

score 0 · Answer 5 · answered Jul 31 '15 at 13:57

You have to include the jQuery library before you start using it within your JavaScript. I recommend putting it just above your body tag to improve loading times.

 <html>
 <head>
    <!-- Usual head stuff -->
 </head>
 <body>
 <!-- Alot of nice HTML and such -->

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 </body>
 </html>

And if you want to be really sure about if jQuery is loaded, you can do something like Carlos Delgado suggests: an if statements what checks if jQuery has been imported.

javascript $ not defined

5 Answers5