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.

jquery_logo

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.