6 steps to take if your jQuery is not working
1. The file is not there or does not exist
People tend to become upset and/or frustrated (Including me) when something simple doesn’t work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.
Also make sure that you have the correct html file open – I have actually tried to load files using the incorrect html, so the path would have been correct if I had the correct html file open. Don’t ever be too proud to check the absolute basics.
2. Incorrect File Path
This is a common problem and it is the first thing I check when I’m having a javascript problem (I actually do step 1 and 2 with my style.css as well). After checking that the file path is correct, I double check by viewing the page source using Firefox, I then click on the .js link. If it opens up the jQuery file (Double check it is opening the correct file) then the destination is correct. If it does not, or it opens a page-not-found, then I know I have a problem with my file path.
3. Script load order
Help! jQuery not working, however it is loading perfectly!!!
Make sure that it is the first script loaded on your page. This is very easy to overlook. The problem exists because browsers understand javascript and not stand alone jQuery snippets. jQuery turns our code into normal javascript code, so that the browsers can interpret what we are saying. Javascript libraries are shortcuts.
If you were to load a library plugin before the library itself has been loaded, the plugin would be seen as bunch of mumbo-jumbo by the browser. This snippet of code means absolute nothing before the library has been loaded.
4. Plugin not working
Plugins malfunction sometimes, for whatever reason; And people sometimes tend to think that jQuery is not working, which isn’t always the case. When it gets this far I think to myself, “Lets get out the big guns”.
Note: Step 1 and 2 can also be applied to CSS problems.
Even though I have tried step 1, step 2 and step 3, I do ANOTHER test to make 100% sure that it is loading properly. 99.999% of the time this is the final test.
Firstly, I make sure there are absolutely NO plugins, other libraries or anything javascript related on my page, except for the jQuery library and a little script I write beneath it.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").css("border", "3px solid red");
});
</script>
This adds a 3px red border to every single div on the page.
If this works, which it really should, the library is loading correctly. You then know that there is something wrong with the plugin(s) and that it is time for more troubleshooting. If you have more than one plugin, try switching the plugin order (This has worked for me on a few occasions), if it is still unsuccessful then remove each plugin and test until something works. Once you find the problem plugin, download it’s latest available version and see if it works.
If the 3px red border does not show up, then it’s time to jump to the next step.
5. Javascript library issues
Do not use multiple javascript libraries simultaneously! There are a few reasons to avoid this even besides the conflicts that could occur. More .js libraries means more html requests and more things to load. It doesn’t matter what .js library you use, use which ever you prefer more but stick with it throughout your project. There are thousands of
jQuery plugins, I would say that 99% of the time there is no need for multiple libraries anyway.
6. Javascript disabled/not supported by browser
Make sure you are using a modern browser, and not IE 5.5 or something old and outdated.
It is possible to turn off the javascript support within a browser, and I have had this problem before (I actually turned off javascript support and forgot to turn it back on).
jQuery not working by this point? Try viewing the page with a different modern browser and see if there is any difference or make sure that javascript is enabled within the browser. This is a last resort.
Tips
- Don’t load two different javascript library versions, only one is ever needed.
- I have started loading jquery through Google at all times:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
The only downside to doing this that I can think of is if you are working offline (Obviously it won’t load) or if Google goes down for whatever reason.
- Step 1, 2 and 3 can be applied to CSS files too. The Step 3 load order could refer to the IE specific stylesheets loading before the main one.
- jQuery not working? Then follow the 6 steps again
- Feel free to comment and ask for help if any is needed.
