How to fix jQuery is not defined: Causes and Solution

Almost every web app developer will face this common JavaScript error jQuery is not defined. If your website or app fully relies on jQuery (74.1 of all sites) this can be a pretty serious issue. jQuery is powering your whole website and if it fails to load this could make the whole javaScript code unusable.

jquery is not defined

What are the common causes of jQuery is not defined?

Let’s have a check for the problem arise. The error can only be caused by one of five things below:

1. Your jQuery file is not properly loaded into your page

Check if the jQuery has been properly added to your page. A small change in the filename can affect identifying your jQuery file. You can either use a CDN for better caching or use locally.

2. You have an edited version of jQuery which result to overwrite the $ variable.

If you or someone edited the core jQuery file there’s a chance for accidentally replacing the $ variable. This can also cause ‘jquery is not defined’ error.

3. You have javaScript running on the page before the page or jQuery is fully loaded.

If your JavaScript code placed on above jQuery, then javaScript code will execute before jQuery and this error can occur. Place the script after jQuery to solve this problem.

4. Your CDN-hosted jQuery might be blocked

If you are loading jQuery using a CDN-hosted version like Google’s Hosted Libraries, these CDN’s might get blocked by a filter or proxy service that enabled on your connection. Mostly we see this habit with requests originating from Chinese or Indonesian IP addresses.

5. Your CDN-hosted jQuery is down or timing out

When the CDN hosted jQuery is unreliable or slow to load results in this error. In most cases, browsers have a timeout of around 20-30 seconds for each script tag.

How to fix a jQuery is not defined error?

We are sharing a simple solution for this conflict.

1. You can easily provide a locally-hosted fallback version along with a CDN hosted version of jQuery as follows:

// First try loading jQuery from Google's CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

// Fall back to a local copy of jQuery if the CDN fails
<script>
window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>'))
</script>

Popular sites including jquery.com solve most jquery is not defined error using this simple technique. If there is an issue loading jQuery via CDN then it will certainly load from your own domain. The main benefit of loading jQuery CDN is you can have a cached version.

If you have a Rails app, you can alternatively use the jquery-rails gem, which automates this fallback process for you.

2. Make sure all jQuery code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

This will ensure that your code is being loaded after jQuery has been initialized.

Another option is to install jQuery using npm or another package manager and bundle it with the rest of your JavaScript. To do this run:

npm install jquery --save

You can check if this is a problem on your site by using a JavaScript error monitoring service like Bugsnag. Bugsnag provides comprehensive JavaScript error reporting which detects this and all other JavaScript errors.

One final thing to check is to make sure that you are not loading any javascript plugins before jQuery. If you load a plugin before loading jQuery core, then you’ll get the same error.

Founder
View posts

A passionate blogger and a tech enthusiast who is always keen and awaiting to know about fully fledged new technologies who's currently using Zenfone 3 as a part of daily routine. You can spot me @ #facebook, #twitter & #Google +

Leave a Comment