Simon Battersby

I get quite a lot of questions from users of this site who are trying to implement some jQuery on their pages, and encountering problems in doing so. I’ll start off by listing the things to check first, and then explain how you to use the browser console to help you. If you’re already seeing error messages in your console, start here.

Nothing happens/jQuery doesn’t work – help!

Go through this checklist in order to rule out the most likely issues:

• Have you included jQuery on your page?

  You need to include a link to jQuery on your page. This is normally (but doesn’t have to be) included in the document head, and will look something like this:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

  If you don’t include jQuery, nothing will work.

• Have you included jQuery just the once

  Check you’ve only got jQuery loaded once. It’s not uncommon to see it loaded more than once, particularly if you’re trying to use a couple of different plugins. Multiple versions usually, but not always, cause everything to fail.

• Are you calling the scripts in the right order?

  You need to call scripts (as in load them on your page) in the order that you need them. This should be: jQuery, jQuery UI (if you’re using it), and then any code that needs jQuery. If a script that needs jQuery runs before jQuery is loaded, it won’t work.

• Does your page use .noConflict()

  Err, what….? You’ll probably be aware that jQuery uses the dollar sign as a shorthand – you’ll have seen code like this:

  $('#myselector').fadeOut('slow');

  Now, it’s possible to disable the use of the $ shorthand by using .noConflict(). This is done in case other javascript libraries need to use the $ variable themselves. WordPress applies .noConflict() by default. The result will probably manifest in the same way as not loading jQuery. To fix this, you’ll need to amend your code to look like this throughout:

  jQuery('#myselector').fadeOut('slow');

  Check out the .noConflict documentation for more information on how to use, and work around this.

• Are you using another javascript library as well as jQuery?

  If you are, the first thing to consider is ‘Why?’. It’s not impossible to do, but you’ll be making things more complex than they need to be, and life harder for yourself. You’ll need to look at .noConflict again.

• Is your code correct?

  If you’ve mistyped your code or otherwise made an error, then that can cause all the javascript on your page to stop working. If this is the cause, then it’ll usually show as a console error – see below.

• Is anything else interfering with your code?

  Sometimes, if you have multiple plugins loaded, either in WordPress, or just lots of scripts loaded, they interfere with each other. If this is a possibility, remove the other scripts and see if that solves your problem. If it does, add scripts back one by one until you isolate the cause.

• It’s none of these….

  Well, at least you’ve ruled out the obvious things. If you’ve got this far, you need to look more closely at your code, see if there are any error messages generated (see below), and take it from there.

Accessing the browser console

Most browsers have a helpful console where any javascript error messages are displayed. These can often give a clue to the problem. Accessing the console varies from browser to browser.

• Firefox: If you’re using Firebug click the icon to launch Firebug and access the Console tab. You’ll need to load the page after launching Firebug.
• IE9: Access Developer tools via F12, and then click the Console menu item. You’ll need to reload the page after launching tools.
• Chrome: Developer tools are Ctrl+Shift+I, then Console tab.
• Safari: Develop > Start Debugging Javascript
• Opera: Ctrl+Shift+I to launch Dragonfly, then the Scripts tab (not the Console tab)

Console errors in 15 seconds

Any of the first four issues in the checklist at the top of the page will generate this (or a very similar) error ($ is not defined) – for example (from Chrome):

If your javascript/jQuery has a syntax error, then the console will tell you where it is, and what it thinks is wrong. For example (from Firebug):

It’s obviously not feasible to list every possible console error here. If you see something in the console that doesn’t make sense to you, the best bet is to copy the message and Google it. Here’s some more information on using the console to debug.

Tags: jQuery