jQuery is a popular JavaScript library used by many websites and organizations. It offers tons of features and functions. But sometimes you may get an error saying ‘Uncaught ReferenceError’. In this article, we will learn how to fix uncaught referencerror in jQuery. This is a commonly faced issue by beginners while using jQuery and can be easily fixed.
How to Fix “Uncaught ReferenceError: $ is not defined”
Let us say you have the following HTML code with JavaScript function in <script> tag.
<html>
<title>Test Page</title>
<body>
...
<script type="text/javascript">
$(function(){
//your stuff
});
or
$(document).ready(function(){
//your stuff
});
</script>
...
</body>
</html>
When you open the HTML in browser you will most likely get Uncaught ReferenceError. This is because all jQuery functions reference the jQuery library file and it has been not been referenced here, so you need to include references to it before any of your script tags that use jQuery. If you have not referenced it, then you will get an error. Here is an example to include jQuery library file via Google CDN. The part in bold indicates the reference.
<html>
<title>Test Page</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
...
<script type="text/javascript">
$(function(){
//your stuff
});
or
$(document).ready(function(){
//your stuff
});
</script>
...
</body>
</html>
Please note, we have included the file in <head> tag so that it is loaded before any of your user-defined jQuery code is run on your page.
You may also include it in HTML body tag but it needs to be referenced before all jQuery code on your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//your stuff
});
or
$(document).ready(function(){
//your stuff
});
</script>
If you are loading the jQuery library from your web server, instead of third party providers such as Google or Microsoft, then please check the path to your jQuery library file. If it is a broken path then web browser will not be able to find it and return 404 page not found error in console. This will cause all subsequent jQuery code to give Uncaught ReferenceError.
In this article, we have learnt how to fix uncaught referenceerror message. Basically, this happens because either you have not referenced to jQuery library file, or the reference URL or relative path is incorrect, or the jQuery file has been referenced after your jQuery code. So the solution is to reference the right URL or relative path, and before all jQuery code on your website.
Also read:
How to Detect Web Browser in JavaScript
How to Get Array Intersection in JavaScript
How to Sort Object Array by Date Keys
How to Pad Number with Leading Zeroes
How to Get Random Element from JS Array