jQuery code not working – A Daily Battle
Earlier I had posted about Common jQuery Mistakes, Various reasons and solutions of jQuery is not defined error and series of articles on jQuery Mobile which you may find helpful to read.. Okay, Lets 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 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 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>
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 do 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 get 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 character are in place.
Another common mistake which every developer does, not intentionally though is incorrect syntax. Sometimes due to hurry or time limit, developers may ignore to check 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 include new things. And they come up with newer version. Due to 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, lets 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 comments and share with the world.
Feel free to contact me for any help related to jQuery, I will gladly help you.
