I'm always writing quick prototypes of ideas I've got, and often they'll include some quick jQuery.

However, for reasons unbeknownst to me, about 1/3 of the time I forget to wrap the statements in a .ready() function, and since I have the habit of putting my script tags in the head - the code never fires. Sometimes it takes me a few minutes before I realise the simplicity of my mistake.

Never again.

I've written a short piece of code that now idiot proofs the jQuery I write.

This code overloads the find method in jQuery - which is fired when parsing the DOM.

Simply, what it does is:

  • Cache a copy of the original find method
  • Runs the original
  • If there's results, stay quiet
  • If there's no results, and the DOM isn't ready, it'll show a message
  • If the DOM is ready, then it will self destruct the method, restoring the original

Include this code directly after you include jQuery, and you'll never be scratching your head again over why your perfectly good selector isn't returning anything.

(function ($) {
  var find = $.fn.find;
  var msg = 'DOM not ready.';

  $.fn.find = function (selector) {
    var ret = find.apply(this, arguments);

    if (!$.isReady && ret.length == 0 && selector != document && selector) {
      if (window.console && window.console.log) {
        console.log(msg);
      } else {
        alert(msg);  
      } 
    } else if ($.isReady) {
      // when the dom is ready, ditch this function
      $.fn.find = find; 
    }

    return ret;
  }; 
})(jQuery);

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit