729

How come this code throws an

Uncaught ReferenceError: $ is not defined

when it was OK before?

$(document).ready(function() {
    $('#tabs > ul').tabs({ fx: { opacity: 'toggle' } });
    $('#featuredvid > ul').tabs();
});

Results in tabs don't close anymore.

jQuery is referenced in the header:

<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/sprinkle.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="<?php echo get_option('siteurl') ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script>
Soviut
  • 79,529
  • 41
  • 166
  • 227
Olivers
  • 7,499
  • 4
  • 15
  • 6

39 Answers39

747

You should put the references to the jquery scripts first.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/sprinkle.js"></script>
Jeremy
  • 8,659
  • 3
  • 19
  • 17
  • 32
    Just to be sure this is clear: you cannot put the script reference to jquery-ui before the jquery script itself. That's what fixed the problem to me: first jquery-x.x.x.min.js, then jquery-ui-xxxxxx.js. – Wagner Danda da Silva Filho Nov 19 '10 at 01:05
  • 29
    2 years later, still the answer is not "ticked" ) [**This articles**](http://jquery-howto.blogspot.com/2013/02/referenceerror-jquery-is-not-defined.html) describes this one and 4 more common cases when this error occurs. – Uzbekjon Feb 14 '13 at 09:46
  • 2
    @Uzbekjon That solved it for me. The path to the script was wrong in _one_ of my `HTML` files. – Adam Jensen Oct 22 '14 at 05:46
  • @Jeremy, thanks a lot. Also put it before any partial view(mvc) so that it is available for any script in the partial. – Andrew Day Dec 09 '16 at 17:17
  • @Uzbekjon That article works for me. Thanks a lot. The jquery.js was not \ loaded successfully before i tried to call $(). – Werdo Dec 14 '17 at 04:52
  • 3
    @Uzbekjon almost 10 years now and it still isn't ticked. Thanks for providing the article link. – Modo Dec 25 '19 at 07:25
  • In my case I had to remove the key defer from – Charden Daxicen Mar 29 '20 at 19:44
  • Thi was such a useful answer thanks for posting . – Ankit Chawla Feb 15 '21 at 12:17
261

You are calling the ready function before the jQuery JavaScript is included. Reference jQuery first.

anonymoose
  • 989
  • 2
  • 13
  • 51
Open Source
  • 2,903
  • 1
  • 12
  • 4
140

This is what solved it for me. Originally I went to Google and copied and pasted their suggested snippet for jQuery on their CDN page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

The snippet does not include the HTTP: or HTTPS: in the src attribute but my browser, FireFox, needed it so I changed it to: edit: this worked for me with Google Chrome as well

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Then it worked.

a_r_m
  • 15
  • 3
Marlin Mixon
  • 1,425
  • 1
  • 9
  • 2
  • 14
    Strictly speaking the Google snippet/example is correct - their src attribute is a protocol less URL which means the browser should use the protocol (HTTP/HTTPS) of the calling page. See http://www.paulirish.com/2010/the-protocol-relative-url/. This is best practice to avoid mixed content warnings if your page is ever served over SSL and the scripts are not. – pwdst Aug 11 '13 at 19:04
  • 13
    One common problem here, likely, is when protocol-relative URL's are used during development, and on a sunny day you try to load a page from a local file. Your browser will optimistically try to load `file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js` and you wonder why it doesn't show up in the network console. – Pieter Ennes Apr 01 '14 at 15:02
  • thanks @PieterEnnes, this was exactly the case for me. Thanks to the answerer too! – jwg Aug 19 '14 at 16:01
45

If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur. So, always keep your own JavaScript or jQuery code after calling the jQuery plugin so the solution for this is :

First add the link to the jQuery file hosted at GoogleApis or a local jQuery file that you will download from http://jquery.com/download/ and host on your server:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

or any plugin for jQuery. Then put your custom script file link or code:

<script src="js/custom.js" type="text/javascript"></script>
consuela
  • 1,646
  • 6
  • 22
  • 24
Jnanaranjan
  • 1,214
  • 15
  • 30
  • 5
    `If your custom script is loaded before the jQuery plugin is loaded to the browser then this type of problem may occur` the perfect answer.. in my case script was in footer – echoashu Nov 23 '14 at 16:23
42

In my case I was putting my .js file before the jQuery script link, putting the .js file after jQuery script link solved my issue.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="exponential.js"></script>
shivam
  • 14,497
  • 1
  • 47
  • 64
29

Okay, my problem was different - it was Document Security model in Chrome.

Looking at the answers here, it was obvious that I was somehow not loading my jquery files before calling the $(document).ready() etc. functions. However, they were all in the correct positions.

In my case, this was because I was accessing the content over a secure HTTPS connection, whereas the page was trying to download the CDN hosted data from google, etc. The solution was to store them locally and then include then directly rather than from the CDN each time.

Edit: The other way of doing this is to link to all the CDN-hosted stuff as https:// rather than http:// - then the model doesn't complain.

Sudipta Chatterjee
  • 4,302
  • 1
  • 23
  • 30
  • 5
    Also, note that you can leave the protocol off links and it will choose the appropriate one depending on the context (assuming both http and https versions exist). See http://stackoverflow.com/a/3622615/4332 – Adrian Mouat Aug 13 '13 at 13:53
  • yep. this one solved my problem, I was loading the scripts from an Url like this ´//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js´. Using ´https://cdnjs...´ works great – user9869932 Jun 23 '17 at 23:53
  • The https (rather than http) worked for me, thanks. – daCoda Sep 08 '20 at 02:04
25

Add the library before you start the script.You can add any of these following CDN to start it.

Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Microsoft

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Jquery

If you want any other Jquery cdn version check this link.

After this:

<script type="text/javascript">
$(function(){
    //your stuff
});
or
$(document).ready(function(){
    //your stuff
});    
</script>

Wordpress:

<script type="text/javascript">
var $ = jQuery;
jQuery(document).ready(function($){
     //your stuff
});
</script>
lalithkumar
  • 3,197
  • 3
  • 22
  • 31
19

If it's in wordpress, might be needed to change

$(document).ready(function() {

to

jQuery(document).ready(function($){

or add

var $ = jQuery;

before

$(document).ready(function() {
xoxn-- 1'w3k4n
  • 464
  • 1
  • 7
  • 18
19

I had the exact same problem and none of these solutions above helped. however, I just linked the .css files after the .js files and the problem miraculously disappeared. Hope this helps.

Narendra Jadhav
  • 8,799
  • 15
  • 28
  • 38
crowicked
  • 589
  • 4
  • 6
  • 13
    First, for better page rendering performance you should always link CSS files before JS files. Second, the order of css and js files should have no effect in the current cituation. – Uzbekjon Feb 14 '13 at 09:43
  • 14
    "What fixed your problem shouldn't fix your problem and you shouldn't do what fixed your problem." – Andrew Oct 21 '15 at 16:32
16

In my case I had this referenceError as the order of script calls was wrong. Solved that by changing the order:

<script src="js/index.js"></script>
<script src="js/jquery-1.10.2.js"></script>

to

<script src="js/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
Yannis Dran
  • 1,300
  • 2
  • 14
  • 23
16

I wanted to try to make my script asynchronous. Then I forgot about it and when I went live the [custom].js file only loaded 50% of the time before the jQuery.js.

So I changed

<script async src="js/script.js"></script>

to

<script src="js/script.js"></script>
Dale K
  • 16,372
  • 12
  • 37
  • 62
Sindri Þór
  • 2,644
  • 2
  • 23
  • 31
14

You are calling the ready() function before the jQuery JavaScript is included. Reference jQuery first.

If you're in ASP.NET MVC, you can specify when your JS code should be rendered, by doing this:

1, In your page.cshtml wrap your <script> tag into a section, and give it a name, the common name to use is 'scripts':

@section scripts {
    <script>
        // JS code...
    </script>
}

2, In your _Layout.cshtml page add @RenderSection("Scripts", required: false), make sure to put it after you reference the Jquery source, this will make your JS code render later than the Jquery.

Mayer Spitzer
  • 1,791
  • 12
  • 22
11

I had the same problem , and I solved by putting jQuery at the top of all javascript codes I have in my code.

Something like this:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
<script src="js/create.js" type="text/javascript"></script>
<script src="js/tween.js" type="text/javascript"></script>

Hope can help some one in future.

marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
The Dead Man
  • 4,997
  • 13
  • 71
  • 119
7

put latest jquery cdn on top of your main html page

Like If your main html page is index.html

place jquery cdn on top of this page like this

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2").hide();
  });
});
</script>
</head>
<body>

<h2>This will hide me</h2>


<button>Click me</button>

</body>
</html>
Sagar Kumar
  • 104
  • 1
  • 7
  • When adding an answer to a ten year old question with thirty seven other answers it is very important to point out what new aspect of the question your answer addresses. – Jason Aller Jul 09 '20 at 22:44
  • New aspect in my answer is the jquery CDN link. In a question his using the downloaded jquery and including in header using PHP. So as I mentioned in my answer I have used jquery CDN which is an accurate, fast, and efficient way to use jquery code. – Sagar Kumar Jul 10 '20 at 10:27
  • Changing where jQuery is loaded from doesn't answer the question which was about having `$` not defined. – Jason Aller Jul 10 '20 at 14:03
  • I have faced the same error. So I fix this issue on my side using same approach so I answered this question how I fix it. If it will be helpful for others then it will be great. – Sagar Kumar Jul 11 '20 at 07:55
6

If you are doing this in .Net and have the script file referenced properly and you jQuery looks fine, make sure that your users have access to the script file. The project I was working on (a coworker) had their web.config denying access to anonymous users. The page I was working on was accessible to anonymous users therefore they didn't have access to the script file. Dropped the following into the web.config and all was right in the world:

  <location path="Scripts">
    <system.web>
      <authorization>
        <allow users="*"/>
      </authorization>
    </system.web>
  </location>
peroija
  • 1,922
  • 3
  • 21
  • 37
6

In my case it was a typo, I forgot a backslash and was referencing the source incorrectly.

Before src="/scripts/jquery.js"

After    src="scripts/jquery.js"

Dennis
  • 46,786
  • 25
  • 128
  • 129
6

Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts. remove tag script on head and put end bady

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

then first write script in file js add

/*global $ */
$(document).ready(function(){  });
  • **Danger**: The version of jQuery used here has known security issues and is unsupported. Get the latest version from the jQuery website. – Quentin Apr 08 '21 at 11:52
5

The source file jquery-1.2.6.min.js is not called the jQuery command $() is executed earlier than <..src='jquery-1.2.6.min.js'>.

Please run <.. src="/js/jquery-1.2.6.min.js.."> at first and make sure the src path is right, then execute jquery command

$(document).ready(function() 
Mihai Iorga
  • 36,863
  • 13
  • 100
  • 102
charles hsu
  • 59
  • 1
  • 1
5

This happened to me before.

The reason was that I'm connecting android to a webview with a JS. And I sent a parameter without quotes.

js.sayHello(hello);

and when I changed it to

js.sayHello('hello');

it worked.

Reinherd
  • 5,096
  • 6
  • 47
  • 85
  • I've no idea what parameter without quotes means... it sounds like you had a reference error. – Aluan Haddad Mar 18 '17 at 05:02
  • I had a problem in Freemarker and the reason was absence of single quotes, so the value was treated not like a string, but as a variable – torina Apr 09 '18 at 17:02
4

Your JavaScript file is missing so this error occurred. Just add the JavaScript file inside the <head> tag. See the example:

<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css" />

or add the following code in tag :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Gaurav Gupta
  • 380
  • 4
  • 9
4

I had similar issue. My test server was working fine with "http". However it failed in production which had SSL.

Thus in production, I added "HTPPS" instead of "HTTP" and in test, i kept as it is "HTTP".

Test:

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

Production:

wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array(), null, false );

wp_register_script( 'custom-script', plugins_url( '/js/custom.js', __FILE__ ), array( 'jquery' ) );

Hope this will help someone who is working on wordpress.

ROOT
  • 10,339
  • 5
  • 24
  • 40
user3671115
  • 101
  • 1
  • 7
4

The error will occur in the following two scenarios as well.

  1. @section scripts element is missing from the HTML file
  2. Error in accessing DOM elements. For example accessing of DOM element is mentioned as $("js-toggle") instead of $(".js-toggle"). Actually the period is missing

So 3 things to be followed - check required scripts are added, check if it is added in the required order and third syntax errors in your Java Script.

Sankar Krishnamoorthy
  • 1,045
  • 10
  • 17
3

Doh! I had mixed quotes in my tags that caused the jquery reference to break. Doing an inspect in Chrome allowed me to see that the file wasn't properly linked.

justreed
  • 57
  • 4
3

In my case i forgot to include this :

 <script src ="jquery-2.1.1.js"></script>

Earlier I was including just jquery-mobile which was causing this error.

Anand
  • 1,315
  • 1
  • 12
  • 19
3

I modified the script tag to point to the right content and changed the script order to be the right one in the editor. But totally forgot to save the change.

Dale K
  • 16,372
  • 12
  • 37
  • 62
Hexodus
  • 9,856
  • 5
  • 42
  • 61
3

You have not referenced a jQuery library.

You'll need to include a line similar to this in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Tico
  • 2,686
  • 2
  • 30
  • 35
asghar
  • 371
  • 3
  • 5
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="local_xxx.js"></script>

I have similar issue, and you know what, it's because of network is disconnected when I test in android device webview and I don't realize it, and the local js no problem to load because it doesn't need network. It seems ridiculous but it waste my ~1 hour to figure out it.

Fruit
  • 6,309
  • 3
  • 42
  • 57
1

I had a similar issue and it was because I was missing a closing > on a style sheet link.

jason
  • 1,030
  • 13
  • 28
1

Strange enough, my problem was coming from PHP.

A REST API call was failing, and it was breaking the loading of the libraries afterwards. Since failure was from the REST call, it was not giving me a php compile error.

Keep this as an option also, if loading jquery seems ok.

Aris
  • 3,804
  • 1
  • 31
  • 33
1

I had this issue, when I was browsing internet through my mobile hotspot. it was also compressing images and added the following script at the bottom of body tag

<script language="javascript"><!--
bmi_SafeAddOnload(bmi_load,"bmi_orig_img");//-->
</script>

When I connected to proper wifi connection, all seems to work find for me. Hope this help someone.

bubb
  • 579
  • 4
  • 3
1

This can also happen, if there is network issue. Which means, that even though the " jquery scripts " are in place, and are included prior to usage, since the jquery-scripts are not accessible, at the time of loading the page, hence the definitions to the "$" are treated as "undefined references".

FOR TEST/DEBUG PURPOSES :: You can try to access the "jquery-script" url on browser. If it is accessible, your page, should load properly, else it will show the said error (or other script relevant errors). Example - http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js should be accessible, on the browser (or browser context stances).

I had similar problem, in which I was able to load the html-page (using scripts) in my windows-host-browser, but was not able to load in vm-ubuntu. Solving the network issue, got the issue resolved.

parasrish
  • 3,084
  • 22
  • 28
1

if you are laraveling that error comes on in blade files when you forgot to surround the code with :

@section('section name')

.......

@endsection
CodeToLife
  • 2,276
  • 2
  • 28
  • 21
-1

You need to call jquery first and then call javascript,as java script depends on jquery, so it should be loaded before javascript and this solved my problem.

user3065757
  • 374
  • 1
  • 4
  • 12
-1

Root problem is a ReferenceError. MDN indicates that a try/catch block is the proper tool for the job. In my case, I was getting uncaught reference error for a payment sdk/library. The below works for me.

try {
  var stripe = Stripe('pk_test_---------');
} catch (e) {
    stripe = null;
}

if(stripe){
  //we are good to go now
}

Obviously the fix is to load whatever SDK/library, e.g. jQuery, prior to calling its methods but the try/catch does keep your shared JavaScript from barfing up errors in case you run that shared script on a page that doesn't load whatever library you use on a subset of pages.

Ronnie Royston
  • 11,959
  • 5
  • 57
  • 72
-1

I had this problem when tried to run different web-socket samples.

When pointing browser to 'http://localhost:8080/' I got this error, but pointing exactly to 'http://localhost:8080/index.html' gave no error since in 'index.html' all was fully ok - jquery was included before using $..

Somehow autoforwarding to index.html not fully worked

user2199593
  • 361
  • 6
  • 15
-2

Here is the worst case:

Everything seemed perfect. After spending a couple of hours I realized that the jquery file which is added in the correct position was actually a file with empty content!

Binod Kalathil
  • 1,814
  • 1
  • 25
  • 42
-2

Bitten by this once again, missing library source links. Google Hosted Libraries Similar link

Community
  • 1
  • 1
Abhijeet
  • 7,483
  • 3
  • 60
  • 70
-2
$(document).ready(function() {
                $.getJSON("<?php echo site_url('cadmin/survey/chart_survey_assisten'); ?>", function (json) { 
                    var acctregs = new Morris.Donut({
                                // ID of the element in which to draw the chart.
                                element: 'hadir-chart-bar-assisten',
                                // Chart data records -- each entry in this array corresponds to a point on
                                // the chart.
                                data: json,
                                xkey: 'label',
                                ykeys: ['value'],
                                labels: ['Nilai'],
                                barRatio: 0.4,
                                xLabelAngle: 35,
                                hideHover: 'auto',
                                resize: true
                            });
                });
           });
-2

In my case, the problem has been solved after installing Windows Server Role Service 'Static Content'. ( OS : Windows Server 2008 R2 )

How to install the 'Static Content' Server Role Service :

  • ( Assuming that the 'Web Server' Role is already installed ) > Run Server Manager > Click 'Roles' in left pane > click 'Add Role Services' in the 'Web Server' area in right pane > select 'Static Content' under 'Web Server / Common HTTP Features' > Click 'Next' > ...
김성훈
  • 79
  • 1
  • 6