jQuery and selectors: how can I make sure that there really is the element I'm looking for?

Question

I'm no experienced JavaScript developer (I know quite a lot about Ruby, though), and so far, when I had to implement some lines of JS, it seemed enough to use jQuery and hack together something.

As far as I understand jQuery, it doesn't assume HTML elements to really be there, but it simply executes a query, and if there is a matching element (or many), some stuff is done with it. This works well for generic code which may want to apply some action to some elements on a page (which may be there or not), but when it comes to specific logic, it's a problem.

What do I mean with this? Let me give an example.

Let's suppose I have one single page with one single HTML element (with the ID '#my_element'). For exactly this page I have to run some JS code, and I have to be sure that it finds this element and does the things to it that I want.

Doing this with jQuery, I simply do something like $('#my_element').addTooltip() , which seems fine first: when I hover over the element, a tooltip is displayed.

Let's assume that some months later I already have completely forgotten about this JS script, and I change the ID of the element to something else. What happens? Nothing. I won't notice the problem with the missing tooltip until I stumble over it by accident.

So I wonder how I can make sure that my JS is really applied, which means: the required elements are found, the stuff is done to them, etc.

Is jQuery's philosophy the "wrong" tool for this? Do I need another framework? Maybe something more sophisticated pattern, eg something like MVC? I played with KnockoutJS before, and it seems that this may be better for this, as it's bound directly to elements using data-bind attributes, so it fits tighter on the code than jQuery does.

Answer 1

The comments mentioned always checking the .length property before performing actions on returned results (which is probably the best answer,) but in the case of an actual syntax error your statement that "nothing happens" isn't always true.

If you're using Chrome developer tools or a similar tool in another browser (firebug, etc.) you should see the error in the "Console"

You can also turn on javascript debugging for more information. When you call the "addTooltip()" on something which is null (the jQuery collection) you'll see an error pop up in the Console and may get an exception in the debugger.

This is one of the easiest ways to find errors in your client-side javascript.

Answer 2

You could add a specific plugin to verify the existence of a non-zero- length collection, and use that in the chain:

(function ($) {
  $.fn.verify = function() {
    if (this.length) {
      return this;
    }
    else {
      console.log("No elements found with supplied selector.")
    }
  }
})(jQuery);

$("#myElement").verify().addTooltip();

This does, of course, rely on the verify() plugin being manually applied, there is – to the best of my knowledge – no error-reporting built in to jQuery to automatically enable logging of invalid selectors, or reporting of selectors returning zero elements.