5 Reasons of jQuery - $ is not defined error

"jQuery is not defined" or "$ is not defined" is a very common error that you may face while working with jQuery or if you have started learning jQuery. The error message "jQuery is not defined" clearly says that it can't find the jQuery and you are trying to access jQuery's power. So in this post, find 5 reasons and their solutions of this error. 

Reason 1:

You have forgot to include the reference of jQuery library and trying to access it.

Reason 2:

You have include the reference of the jQuery file, but it is after your jQuery code. For example,

1	<script type="text/javascript" language="javascript">

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

3	//Your jQuery code goes here....

4

});

5

</script>

6

7	<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

So in this case, you will encounter "jQuery is not defined" error, as the reference of the jQuery library is after the code.

Reason 3:

The order of the scripts is not correct. For example, if you are using any jQuery plugin and you have placed the reference of the plugin js before the jQuery library then you will face this error. For example,

1	<script type="text/javascript" src="Script/jquery-plugin.js"></script>

2	<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

Above code is clear case of incorrect ordering. As when plugin try to access the jQuery and jQuery is not loaded yet then this error will come. So the correct order should be,

1	<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

2	<script type="text/javascript" src="Script/jquery-plugin.js"></script>

Reason 4:

If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library. This is incorrect ordering.

1	<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>

2	<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

Correct order is:

1	<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>

2	<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>

Reason 5:

If you are loading the jQuery library from any of the CDN (Read Load your jQuery framework from CDN), then please check that CDN link is working. So the best thing is to use code to load jQuery even if the CDN link is down. Read How to load jQuery locally when CDN fails

So there are 3 possible solution for this error.

•  Please ensure that you have included the reference of jQuery library.
•  Please ensure the order of loading jQuery library in case if you are using any other js which is dependent on jQuery library.
• If you are using CDN, then read and implement How to load jQuery locally when CDN fails

Reference :http://jquerybyexample.blogspot.com

-Thanks.

Tips to use jQuery selectors efficiently

It is pretty important to understand how to write efficient element selection statement. One has to be very careful while jquery selector statement. Below are some tips on how to use your jQuery selectors efficiently.

1. Always try to use ID as selector 

You can use ID as selector in jQuery. See below jQuery code.

1	$("#elmID");

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element. 

When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

2. Use class selector with tags

You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.

1	$(".myCSSClass");

As said earlier, when classes are used DOM traversal happens. But there could be a situation where you need to use classes as selector. For better performance, you can use tag name with the class name. See below

1	$("div.myCSSClass");

Above jQuery code, restricts the search element specific to DIV elements only.

3. Keep your selector simple, don't make it complex

Avoid complex selectors. You should use make your selectors simple, unless required.

1	$("body .main p#myID em");

Instead of using such a complex selector, we can simplify it. See below.

1	$("p#myID em");

4. Don't use your selector repeatedly.

See below jQuery code. The selectors are used thrice for 3 different operation.

1	$("#myID").css("color", "red");

2	$("#myID").css("font", "Arial");

3	$("#myID").text("Error occurred!");

The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.

1	$("p").css({ "color": "red", "font": "Arial"}).text("Error occurred!");

5. Know how your selectors are executed

Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

  $("p#elmID .myCssClass");


Thanks,
Rajasekhar.