Error: jQuery is not defined

Posted on: May 22nd, 2013

Every now and then when developing you may come across this error: jQuery is not defined. Another variation is $ is not defined, but it essentially means the same things: Your jQuery is busted and will not work. There a few different ways to figure out what’s going on and all or none may apply to you.

View Source

If you’ve seen the above errors, you’ve probably managed to get to some form of “Console” in your developer tools, so nice job. View Source for your page and search for ‘jquery’. If you get no results, then you’ve completely left out jQuery. Time to reconsider that “personal” boilerplate you’ve been using.

Version Issues

Okay, so you found a jQuery file, what version is it? Some portions of jQuery may not be available, or may be excluded with the version of jQuery you are running. When all else fails, update to the latest version and see what happens. jQuery.com has some great update guides for each version that comes out (1.9 – all changes documented have also been applied to 2.0).

Google CDN vs. Local

Many people suggest letting Google host jQuery for you. The argument is, Google is faster than you and can serve jQuery to your visitor faster. The argument is that, why make an extra http call to a resource located off of your server. Some say it’s quicker, since Google is, well, Google. I haven’t really read anything on the topic so I use a fallback, shown below.

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.0.min.js">\x3C/script>')</script>

The above code is the latest version that I’ve been using, grabbed from here which takes a deep look into different way you can load jQuery.

Path Errors

Now that you’re correctly linking to a jQuery file, stay in “View Source” and click the link to go to the script itself. If you get a 404 error, check your path and make sure the script should be there. If it is an absolute reference link, checking the path is pretty simple, but if it is a relative path, you may have to think a little harder. Continue down this path until you can directly access your jQuery file through the correct path. Great, jQuery is in and working, but you’re still getting an error.

Script Placement

This may seem obvious, but if you accidentally call a script that uses jQuery before you actually call jQuery, you’ll get the standard “jQuery is not defined” error because you literally have not defined it yet. Note the differences below.

Error
<script src="../main.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
Success
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script src="../main.js"></script>

WordPress Related

WordPress uses .noConflict(); mode by default, so using $ instead of jQuery will not always work. There are special cases where you wrap your functions in

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

});

//or 

(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
})(jQuery);

Those examples are ripped directly from the WordPress Codex, so check out the full documentation to make sure you use it correctly.

previous post: Switching Servers – The Purge next post: Do Not Duplicate Posts Array and Offset