jQuery is undefined error : Common mistake every developer should avoid

In this post, we will learn about possible solutions of jquery is undefined error with an example.

Description:

In my previous posts I have explained various topics like Get site visitor count in asp.net
Convert generic list to datatable in Asp.Net C#.Net, Abstract Class in C# with Example,
Routing in Asp.Net MVC with Example
,Use of Global.asax in Asp.net

Now in this post, I will explain about a solution of jquery is undefined error. When it comes to JavaScript or Jquery and it’s libraries or plugin, one of the most disturbing errors that pop up is jQuery is undefined. There could be several reason for this error.I have faced this error many times during development so thought to share of the solution to this error.



Common causes of ‘jQuery is undefined error’ :

Below are the top causess where you’ll likely to face the jQuery is undefined error :

1. Incorrect load order of JavaScript assets.
2. jQuery source can’t be loaded/found.
3. Conflicting plugins/libraries/code.
4. Framework implementation issues.

1. Incorrect load order of JavaScript assets:

This one is the most simple causes of jQuery being undefined. In this case, jQuery is being loaded but it’s coming after another library/script that attempts to use jQuery and expects it to be defined.It is something like race condition.
Below is an example of jQuery being loaded AFTER example.js which may contain references to jQuery which has not been loaded:

<html>
  <head>
    <script src="js/example.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>
  <body>
    <p>This is test content.</p>
  </body>
</html>

Here you will see that I have moved jQuery to be loaded before the rest of our JavaScript,it will make possible to access to jQuery after it has been loaded:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/example.js"></script>
  </head>
  <body>
    <p>Random filler text content.</p>
  </body>
</html>




2. jQuery is not loaded/found:

Another issue is if jQuery is not found and hence not loaded. If you host your jQuery library on your own web servers and something happens that prevents the local copy from being loaded, jQuery will not be available. However, having to access a locally hosted copy of these files can lead to longer page load times.

To speed up page load times one can use a CDN (content delivery network) like Google to manage and provide JavaScript sources. These services are great in providing improved page performance/load times and have a relatively high uptime.
I personally select approach that try to load the CDN version of the library but then checks afterward to see if jQuery was loaded. If it hasn’t been loaded then a local copy is accessed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery_file.js"><\/script>')</script>

This will try to load the CDN version of jQuery and then check to see if jQuery is loaded.  If it is, nothing happens. But if window.jQuery does not return a value the code will attempt to load the locally hosted version.

3 – Conflicting plugins/libraries/code:

Many times third party code like(plugins, libraries, and/or code snippets) can attempt to reassign variables or call them out of scope. jQuery uses $ as a shortcut when referencing itself. This is normally fine but other developers sometimes assign $ in their own code. If this happens and your code (or another library) tries to reference jQuery via the $ shortcut, you will see the jQuery is undefined error pop up.

Solution 1 : $.noConflict()

When jQuery is initialized it keeps record of the current value(s) of $. Calling jQuery.noConflict() restores/reset those values, so enabling other libraries/code to continue using $ as they see fit. The issue with this method is that while it may free up $ for use, it might have unintended effect with other libraries.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
  $.noConflict();
  jQuery( document ).ready(function( $ ) {
    // code which uses jQuery's $ goes here
  });
    // code which users another library's $ goes here
</script>
Solution 2 : custom shortcut for jQuery

Apart from using .noConflict,it can just be used as is, you can also define a custom shortcut for jQuery as follows:

var k = jQuery.noConflict();

// Do something with jQuery
k( "div li" ).hide();

// Do something with another library's $()
$( "conent" ).style.display = "none";

This will enable your code to use jQuery without needing to bother about another application utilizing/reassigning $.

Solution 3 : anonymous function

This option is to scope $ for jQuery to use in your own code. To do this, you required to declare an anonymous function which takes jQuery as an argument. Next, reference the function via $ in the scope/context of your anonymous function.

(function($) {
  'use strict';

  $(function() {
    // your code here
  });
})(jQuery);




4 – Framework implementation issue :

This issue can be happen to both load order and conflicts with other code sources. Many developer consider placing all required JavaScript references right before the closing body tag. This prevents slow JavaScript files increasing page load time. The jQuery is undefined issue can creep up if a framework (like Joomla or Zend) loads external scripts in the head of your pages while your jQuery is still at the bottom of the body tag. This potentially leads to jQuery being referenced before it has loaded.


Read :

Summary

You can also read about ASP.NET, C#.Net, JQUERY, AJAX, JavaScript
I hope you get an idea about solution of jquery is undefined error.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you liked this post, don’t forget to share this.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *
Email *
Website