How to make javascript/jquery code error proof?

Question

If jQuery is included in <head> and in <head> if we have some another jQuery code and that code has an id which is a id of an HTML element, so if jQuery library and jquery code in <head> is added globally

And if any page doesn't have that html element which is used by jQuery code then browser gives JavaScript error.

Can I make jQuery/JavaScript code like, if jQuery finds an HTML element with id in <body> then it should work fine.

If another page doesn't have that HTML element with id then I know jQuery will not work.

But what I want:

An error should not be thrown if a page doesn't have an HTML element with the given id.

@Richard E: probably something to that extent, only that selector is never undefined. it is, at the very least, a jquery array of zero elements, so what you want to check is whether length is greater than zero. — David Hedlund
– David Hedlund, Commented Jan 21, 2010 at 11:30
From what I understand (correct me if I’m wrong), you want your code to fail silently if it does not find the “target” on which to do its thing. I think this is bad practice. Check for the target and then run the code. If you have no target, then don’t run. Don’t just keep your fingers crossed… — user159088
– user159088, Commented Jan 21, 2010 at 11:41
@dpb - but when we use cms then usually we use only one header.php file and whatever we include in this it will be applied to all pages. — Jitendra Vyas
– Jitendra Vyas, Commented Jan 21, 2010 at 11:43
Aha... I understand now. You don't know in what kind of page your header will end up. In this case test for the presence of your targets, like in David Hedlund's answer. — user159088
– user159088, Commented Jan 21, 2010 at 11:47

David Hedlund · Accepted Answer · 2010-01-21 11:29:46Z

5

A lot of jQuery code works like this already, as it is set-based, and you can do operations on sets of 0 elements. I.e. these will always work, regardless of whether or not the selector matches any elements:

$('#myButton').click(function() { ... });
$('#somethingElse').hide();

In some cases you really do need a reference to at least one element, however, for the rest of the script to work. In these cases, you have to manually check that the element exists:

if($('#myElement').length == 0) return false; // or similar...

answered Jan 21, 2010 at 11:29

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jitendra Vyas Over a year ago

@David - can u explain with example?

Erik Over a year ago

if($('#myElement').length) { ... } Shorter and does the same thing

David Hedlund Over a year ago

@Jitendra: that was my example! $('#myElement') is jQuery code to find all elements with the id "myElement". as it is an array(ish) of elements, you can check its length property. if length is 0, it means there was no element with the id "myElement" in the page. Since 0 is falsy i.e. resolves to false when used as a boolean, Erik's shorter version is exactly equal.

Eduplessis · Accepted Answer · 2010-01-22 14:30:12Z

2

if($('#myElement').length != 0){
  my special js magic thing;
}else{
  return false;
}

answered Jan 22, 2010 at 14:30

Eduplessis

1614 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to make javascript/jquery code error proof?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related