Sunday, April 9, 2017

3 Ways to Solve jQuery - Uncaught ReferenceError: $ is not defined Error

If you are using jQuery, Angualr JS or plain old JavaScript and getting "Uncaught ReferenceError: $ is not defined" error which means $ is either a variable or a method which you are trying to use before declaring it using var keyword. In jQuery, it's a short name of jQuery() function and most commonly used in $(document).ready(function()). If you are doing some jQuery stuff when DOM is loaded and getting this error it means your browser has a problem loading jQuery library either from the internet or local file system. In this article, you will see some of the most common reasons of "Uncaught ReferenceError: $ is not defined" error and how to solve them, but before that let's learn some basic about the dreaded Uncaught ReferenceError: $ is not defined error.

One of the common reason of such error is directly starting with jQuery without knowing JavaScript fundamentals. I have seen many web developers which comes from Java, C#, HTML, and Python background, started using jQuery without knowing much about JavaScript.

If you happen to work on same scenario, I strongly suggest you to read atleast one of the good JavaScript book for beginners e.g. Head First JavaScript. Always remember that jQuery is a library built on JavaScript, once you know JavaScript, it's much easier to troubleshoot any jQuery error.

Uncaught ReferenceError: X is not defined

Since JavaScript executes inside browser, your browser like FireFox, Chrome, Edge or Internet Explorer throws this error when you are using a variable which is not defined, for example, following code will ce this error, but once you declare the variable using var keyword, the error will go away:

data; // ReferenceError: data is not defined
var data;
data; // No more errors

Similarly, if you access a method before declaring it you will get this error as shown below:

process(); // ReferenceError : process is not defined
process = function(){};
process(); // No errors

Now that you have learned when does browser throws Uncaught ReferenceError: $ is not defined, it's time to look at some common reasons this error occurs while using jQuery, AngularJS or other JavaScript library which uses $ as a shortcut.

jQuery - Uncaught ReferenceError: $ is not defined Error

1) One of the most common reason of "ReferenceError: $ is not defined" in jQuery based application is that jQuery plugin is included before jQuery file. Since jQuery plugin uses $, it throw "ReferenceError: $ is not defined" if it doesn't find, which is logical because jQuery was not loaded until then.
<script src="/lib/jquery.plugin.js"></script>
<script src="/lib/jquery.min.js"></script>

Solution: Include the jquery.js file before any jQuery plugin files.

<script src="/lib/jquery.min.js"></script>
<script src="/lib/jquery.plugin.js"></script>

2) The second most common reason of getting "ReferenceError: $ is not defined" in jQuery is due to the incorrect path, either it's a typo or jQuery file is moved to some other location, the browser is not able to load the jQuery file.

One solution of this problem is simply to fix the path to jQuery library. If you are downloading jQuery from CDN then you can also use Google hosted jQuery file, which is almost always available.

3) Another bizarre but a common reason of "ReferenceError: $ is not defined" in jQuery" is that you might be working offline but loading jQuery from internet. It's one of the silly mistake every web
developer makes it sometime or other. Solution is simple, either connect to internet or use a local copy of jQuery library as shown below:

<script src="/js/jquery.min.js"></script>

That's all about how to fix the "Uncaught ReferenceError: $ is not defined" in jQuery. You can follow similar approach to any other JavaScript library which is using $ as shortcut. Most of the cases mentioned here also applicable to common libraries like AngularJS and others as well.

Further Reading
jQuery Fundamentals By Dan Wahlin
The Complete jQuery Course: From Beginner To Advanced!
Up and Running with jQuery

Other jQuery and JavaScript tutorials you may like to explore
  • Top 5 jQuery Books Every Web Developer Should Read? (see here)
  • How to get current URL Parameter using jQuery? (solution)
  • How to use multiple jQuery Date picker element in one HTML page? (answer)
  • 10 Examples of jQuery selectors for Web Developers (tutorial)
  • How to redirect web page using jQuery code? (answer)
  • 3 Ways to parse HTML using JSoup in Java? (solution)
  • How to reload/refresh a page using jQuery? (answer)
  • How to prevent double submission of POST data using JavaScript? (solution)
  • How to modify multiple elements in one go in jQuery? (example)
  • How to check and uncheck checkboxes using jQuery? (tutorial)
Thanks for reading this article so far. If you like this article then please share with your friends and colleagues. If you have any question or doubt then please drop a comment. 

1 comment :

Anonymous said...

4th would be handling ajax calls with JS code before jquery is loaded at the bottom of the page

Post a Comment