Uncaught Reference Error: $ is not defined- A jQuery beginner error
After a long time i tried to get back to coding. I thought it would be good to start with jQuery. I felt that i was a beginner. It was very depressing to recall the skills you once used to have are blunt now.
Anyways, when i wrote my first code in jquery I got stuck with a very common error that beginners face.
Uncaught Reference Error: $ is not defined
For all the pros out there, this is the right time to stop reading this article. Rest please continue.
Following is the code that i had written for the HTML:
<html> <head> <title> Practice page </title> <link rel="stylesheet" href="styles/style.css"> <script language="JavaScript" type="text/javascript" src="scripts/scripts.js"></script> <script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script> </head> <body> <h1>JQuery</h1> <p> This is just to test</p> </body> </html>
This is the time when i faced the truth. I had lost the touch.
I kept on checking the following jQuery code that i had written:
$(document).ready(function(){ $('body').append('<p>This paragraph was added with jQuery!</p>'); });
I searched a lot and tried a lot of things. But the “Uncaught Reference Error: $ is not defined” kept on coming.
I was a bit embarrassed when i found out the actual reason.
It was i imported the script file before i imported the jquery file. All i had to do was to interchange the lines.
Following is the change i made to get it working in the HTML file.
<html> <head> <title> Practice page </title> <link rel="stylesheet" href="styles/style.css"> <script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="scripts/scripts.js"></script> </head> <body> <h1>JQuery</h1> <p> This is just to test</p> </body> </html>
It happened because we were calling the ready function before the JQuery Javascript was included.
Happy Coding guys.