jQuery Code Not Working - A Daily Battle

Developers life is full of various code battles and "jQuery is not working" or "jQuery code is not working" is a just another daily battle which they have to fight against while working with jQuery. The message "jQuery is not working" itself defines its pain saying "Oh!!! there is something buggy in your code and that is stopping me from working". So in this post, we will see some basic strategies to win this "Daily Battle".

Earlier I had posted about Common jQuery Mistakes, Various reasons and solutions of jQuery is not defined error, Correct way to check if object is null or Empty and series of articles on jQuery Mobile which you may find helpful to read.. Okay, let's begin...

STRATEGY No. 1: Check for jQuery Reference

The first strategy is to ensure that you have included the reference of jQuery library and that too, at the correct place. It has to before your jQuery code.

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //Your jQuery code goes here....
 });
</script>

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

So with this code, you are ready for your "Daily Battle", as the reference of the jQuery library is after the code.

Another important thing which matters a lot is the order of your scripts. For example, if you are using jQuery along with jQuery UI, first include jQuery and then jQuery UI library.

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

The same is true while using jQuery plugins.

STRATEGY No. 2: Check Your Selectors

The second strategy is to find out whether "Wrong Element ID or CSS Class Name" is not used. This is a very common mistake developers make while writing code. This happens because developers believe that they can never go run with this. As they say "Confidence is good but over-confidence is bad".

Another common cause is to mix up "#" (hash) and "." (dot). Remember, "#" is used to select elements by ID and "." is used to select elements by CSS class name. Many times, developer mixes these two and gets ready for "Daily Battle". So make sure that your selectors are correct.

STRATEGY No. 3: Check for Comma, Semi-colon, Brackets and Syntax

When you write jQuery code, you will find comma, quotes, semi-colon and brackets everywhere. Without the proper/correct use of these characters, your jQuery code is not going to love you back. So make sure that all these characters are in place.

Another common mistake which every developer makes, not intentionally though is incorrect syntax. Sometimes due to hurry or time limit, developers may ignore checking the syntax which may lead to "Daily Battle". So make sure your syntax is correct.

STRATEGY No. 4: Check for jQuery Version

jQuery team is continuously updating this library for making things fast and to include new things. And they come up with a newer version. Due to the excitement of new release and eagerness to use new functionality, developers sometime include the new jQuery version without checking for old code compatibility.

For example, $.browser property to check for browser was removed in jQuery 1.9. And if you are using $.browser in your code and you have updated your code to jQuery 1.9, then your old code is going to break. Your Lead/ Project Manger/ Client will give you a kick and you are ready for your "Daily Battle".

So before updating to newer/latest version, check the release log on jQuery website to find out if any functionality is removed or deprecated in newer release. And always remember to test your old code against the new release.

STRATEGY No. 5: Check for Conflict

Conflict happens. It happens everywhere. Well, let's admit it that "Nobody likes Conflict" and same is true for jQuery. It also hates conflicts. But conflicts with whom? Well, remember jQuery is not the ONLY client side library which exists in this world. There are many other competitors like prototype, mootools, YUI etc. And when there is competition, there is conflict of interest.

These libraries also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other libraries as their global function. And you are ready for your "Daily Battle".

So we need conflict resolution. And to resolve conflict, jQuery has jQuery.noConflict().

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });  
     // Use Prototype with $(...), etc.
     $('someid').hide();
</script>

The above mentioned strategies are nothing, but just a checklist which you can always follow when your "jQuery code is not working". If you have anything to add in this, please include them in the comments and share with the world.

Feel free to contact me for any help related to jQuery, I will gladly help you.