$ is not defined in jsfiddle

Question

Suppose I have the following html:

<div id="test1">hi</div>
<a href="#" onclick="showDiv()">click here</a>

and the javascript:

function showDiv() {
    $("#test1").hide();
}

When I try it on jsfiddle, it returns:

$ is not defined

Did I miss some setting in jsFiddle?

Thanks.

Why are people downvoting this question, and voting for it to be closed? It's a perfectly good question, and may serve to help someone else who experiences exactly the same issue. Thank you for your question, @Kintaro. — Drew Noakes, Mar 18 '13 at 01:23
*"Did I miss some setting in jsFiddle?"* You mean like the one at the top that lists the libraries? — the system, Mar 18 '13 at 01:23
@thesystem, don't assume what's obvious to you is obvious to others. — Drew Noakes, Mar 18 '13 at 01:25
@DrewNoakes: Settle down. A brief look at the jsFiddle settings would have solved this. — the system, Mar 18 '13 at 01:26
Possible duplicate of [How to add jQuery to JSfiddle](https://stackoverflow.com/questions/36620565/how-to-add-jquery-to-jsfiddle) — Nisse Engström, Aug 07 '17 at 14:35

score 20 · Accepted Answer · edited Mar 18 '13 at 01:18

20

That suggests that you have not selected one of the jQuery libraries from the left hand side of the screen.

JSFiddle

edited Mar 18 '13 at 01:18

James M

18,506
3
48
56

answered Mar 18 '13 at 01:17

Drew Noakes

300,895
165
679
742

I took a screenshot while writing my answer, but you answered first and I thought I might as well put it somewhere. Hope you don't mind! – James M Mar 18 '13 at 01:19
@James, I was busy making a [screenshot of my own](http://i.imgur.com/MgFkA1T.png?1) only to come back and find that you'd added one for me :) – Drew Noakes Mar 18 '13 at 01:19
Ha. Feel free to replace it if you prefer yours to mine... :-) – James M Mar 18 '13 at 01:20
Nope. Yours is perfect. Thanks. – Drew Noakes Mar 18 '13 at 01:21
3

Update for 2015: This option is now in the top right corner of the JAVASCRIPT area. I tried to add an image, but rejected by stupid, stupid reviewers. – Nick Westgate Dec 02 '15 at 22:16

score 10 · Answer 2 · answered May 26 '16 at 23:16

10

These answers are old and for anyone looking for an updated version the dropdown menu is now located on the gear next to the word Javascript at the top right of your javascript window in jsfiddle.

answered May 26 '16 at 23:16

Kyle Wilson

126
1
3

score 4 · Answer 3 · edited Dec 16 '15 at 20:27

4

Screenshot of the current (Dec 2015) version of jsfiddle:

I just wasted a lot of time on this silly error as well - frameworks and extensions are now selected via the "JAVASCRIPT *" button in the JavaScript pane!

edited Dec 16 '15 at 20:27

Drew

24,851
10
43
78

answered Dec 16 '15 at 20:22

Scott Stratford

41
3

score 1 · Answer 4 · answered May 04 '17 at 06:29

1

If anyone is reading this in 2017, then make sure to add the jQuery link using https protocol. This is to be added in the External resources tab present at the left of the page.

answered May 04 '17 at 06:29

Harshil

436
1
7
16

score 0 · Answer 5 · answered Mar 18 '13 at 01:25

0

Either do what @Drew and @James show.

if you remain having problems (which I know I did the other day), you can add an external resource from a CDN library

"http://code.jquery.com/jquery-1.9.1.min.js"

good luck !

answered Mar 18 '13 at 01:25

Daniel

4,816
3
27
31

score -1 · Answer 6 · answered Mar 18 '13 at 01:27

-1

$("#test1").hide();

the above is not defined meaning the $

Example.

jQuery(document).ready(function($) { $("#test1").hide(); } `

jQuery(document).ready(function(IsNowDefined) // just for explanation IsNowDefined("#test1").hide();

answered Mar 18 '13 at 01:27

Grmn

542
2
9

$ is not defined in jsfiddle

6 Answers6

Linked