How to debug effectively while using jQuery

Common jQuery Errors and How to Resolve Them

jQuery is a JavaScript framework used for client-side scripting of HTML. jQuery is used for:

1. DOM manipulation
2. Event Handling
3. Animation

jQuery is a popular framework with a large community of developers using it, and many plugins have been developed using it. While working using jQuery in our projects, we may encounter the following errors in common:

• 1) Uncaught TypeError: Cannot read property 'xxx' of undefined
• 2) Uncaught TypeError: 'xxx' is not a function
• 3) SyntaxError: syntax error
• 4) 404 Errors
• 5) Conflict errors

You may also read: Datatables-plugin options

Ways to handle errors in jQuery

• Check whether jQuery is loaded.

  if (typeof jQuery == 'undefined') {
    // jQuery IS NOT loaded, do stuff here. 
  }

• Check whether the custom script is loaded.
• Check for console errors. You may find any one of the above errors.
• Try whether it is working in document is ready or after page loads or in window resize.
• Recheck your logic. Get your values as variables in console.
• Try to narrow down your problem. Remove your DOM elements one by one and assess which div is causing the problem.
• Isolate the problem in JS fiddle or separate file for clarity.

Resolving Common Errors in jQuery

1) Uncaught TypeError: Cannot read property 'xxx' of undefined

Example: Uncaught TypeError: Cannot read property 'top' of undefined. The function throws error as the element is not present.

if( $(".element").length > 0 ){ 
  $(".element").offset().top; 
}

Function will be executed only if the element is present.

2) Uncaught TypeError: 'xxx' is not a function

When initializing the function it should be called as xxx(). Be clear where the function has to work—whether on page load or document.ready(). Go through the code if you have missed any semicolons at the end of the statements.

3) Conflict errors

There are chances that you might have referred jQuery twice. If we use one more jQuery library, conflicts may occur. Call the 2nd library at the bottom of the page and use the noConflict function.

jQuery.noConflict(); 
(function( $ ) { 
  $(function() { 
    // More code using $ as alias to jQuery 
  }); 
})(jQuery);

4) Syntax errors

Keep in mind that JavaScript is case-sensitive and so jQuery is also case-sensitive.