You’re probably terrified every time the error ‘jQuery is not defined’ appears. This query can definitely shut down your entire website. If your page is one of 73% of the sites which run on jQuery, then this error may be a real struggle.
To make things clear, jQuery is a library designed to simplify HTML with all its components:
Below, is how it looks on your screen, in case you haven’t experienced this problem yet:
WordPress Reference Error is not defined: Fix jQuery is not defined
There are a variety of causes for this problem.The majority of users should find the following two reasons are very common. Carefully read and analyze which one could be the main cause of the error on your screen:
Always take into account that for as many parties you have in the coding, you have as many chances for their variables to conflict.
This can also be the case of the jQuery code in contact with other plugins or snippets. Let’s take, for example, the symbol $, which jQuery uses as a shortcut for its own name. In the code of another third party, the $ can have another value. Both values can’t exist at the same time in the same program. That’s why “jQuery is undefined”.
However there are more ways to handle this problem, which you can easily find online.
Remember that the browser sends the uncaught reference error, jQuery is not defined, after only half a minute of loading. This means that your CDN-hosted jQuery has less than 30 seconds to perform the action. A slow or unreliable host would be the cause of the error in this case.
The first rule in working with dependency products such as jQuery is keeping the order of loading between it and the rest of the code. First, you should completely load the jQuery. Then your code will function properly using the data from the dependency. Otherwise, the error “jQuery $ is not defined” will surely appear.
Another problem may be the fact that each framework works differently.
When using a library from Google, there are more chances for your jQuery hosted on CDN to get shut down. Filters or proxy services are the most likely causes of this inconvenience. However, such cases usually happen in China or Indonesia, due to the huge number of requests located in this geographical area.
This can bring many little problems inside your programs, such as animation lagging or plugin deactivation.
Finding the root cause is the first step in eliminating this problem. However, in many cases, this is not as easy as it seems. It can be a plugin or a theme or something else and it may be difficult to find the right cause when it’s a combination. Incompatibility between plugin and themes is just an example and that’s a real struggle!
If you can’t find the initial problem, check some settings throughout the program. First of all, make sure your jQuery file is fully loaded into the host program. Remember to give all the necessary permissions to avoid security issues interfering with the running of the program.
However, loading your jQuery in the program is not enough. The important detail is that the plugin itself gets loaded before jQuery, which is how you can avoid the ‘$ not defined’ message.
The problem is usually caused by a mistake in the code. In order to fix it, use the keyboard Ctrl + U to access the source code. Then you can analyze and find any reference to jQuery. One of them should clearly have a problem.
Here are some approaches that we propose to help you with those coding problems:
Add the following snippet in your wp-config.php file. Don’t cut out the define statements:
/** Absolute path to the WordPress directory. */ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); define('CONCATENATE_SCRIPTS', false);
This is another way of approaching the problem. Through this coding segment, we show you how to include Google-hosted jQuery with a local/alternate fallback.
// 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>
This is an official solution provided by the jquery.com website. When jQuery is not defined because of some loading issues then using your own domain will likely help. You’ll have a cached version, which an advantage worth taking into account.
There’s also another option for you to solve things quicker. Download the application Rails, which will automatically manage the fallback process.
Actually, this technique will allow you to solve the problem easily and it’ll also bean advantage for your website. It will run on the localhost which will make the browsing experience even more pleasant for your visitors and avoid any other CDN jQuery loading failures.
If you’re reading this, it means the previous 2 methods didn’t work for you.So now, get straight into your header.php file and insert the jQuery library there. Here is a step-by-step guide:
If you enjoyed reading this article about jquery is not defined, you should read these as well:
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.