How to handle an error that is already produced by jQuery document ready event

Standard

Most of the times, while working with jQuery, we used to face a very common issue with other plugins or jQuery snippets throwing error in the document ready event that prevents other jQuery code stopped working due to the error already occurred in the document ready event. It’s important to remember that if a document ready event triggers error, other jQuery code will stop working. You may be working with Joomla, Drupal or WordPress or any other CMS with lots of plugins or extensions and you are writing your own. Things go messy when your jQuery code is correct, but others are not and hence your code is not working. The question is how to solve this issue?

Let’s take a simple example of a following jQuery code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery previous error handling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<p>some text</p>
<script>
jQuery(document).ready(function($) {
  nomethod(); // produces error
});
</script>
<script>
jQuery(document).ready(function($) {
   alert('Hello');
});
</script>
</body>
</html>

In the above code snippet, the first document ready event will produce an error as the function nomethod() does not exist and as a result, the next document ready event in the chain will not be executed at all. You will not able to see the alert box with “Hello” text.

Following is the solution to the problem:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>jQuery previous error handling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<p id="p">some text</p>
<script>
jQuery(document).ready(function() {
  nomethod(); // produces error
});
</script>
<script>
// This is my jQuery code
var oldReady = jQuery.ready;
jQuery.ready = function(){
  try{
     oldReady.apply(this, arguments);
  } catch(e) {
  }
  myPluginFunction();
};
function myPluginFunction() {
   alert('Hello');
}
</script>
</body>
</html>

The above solution will run your code regardless of the fact whether the earlier document ready event has triggered an error or not. What am I doing here? I am actually tracking the earlier document ready event and apply the same with a try…catch block in my JavaScript/jQuery code and then calling my function to do the other tasks. So, you don’t need to poke around others jQuery code to fix the error to run yours. You can now control your code. Simple and awesome! Isn’t it?

Hope this will help others who are facing this kind of issue. You can also share your experiences with these kinds of issues in the comment section so that other users can get benefit from those.

Happy coding! :)

Advertisements

I will be happy to answer your queries

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s