Degradable Javascript Links

Here’s a useful technique for anyone doing Javascript/Ajax work.

It’s a common practice to invoke javascript functions from the onClick event of an element (a link, button or whatever). I often see them implemented a little wierdly though.

Solution #1 – The Usual

This is what I often see:

<a href="#" onClick="someFunction()">Click this. I know you want to.</a>

I don’t like this because it make the focus jump to the top of the page. That’s just wierd.

Solution #2 – For testing/debugging/development

One step better would be to do this:

<a href="#" onClick="someFunction(); return false;">Click This. I know you want to.</a>

This is better because by returning false, the focus won’t shift to the top of the screen.

This solution works poorly in the event that a user has javascript turned off.

Solution #3 – For production

In production, the best solution is this:

<a href="you_have_javascript_disabled.html" onClick="someFunction(); return false;">Click This. I know you want to.</a>

If the user has javascript enabled, your Javascript will run and the user will see what you intend them to see. If the user has Javascript disabled they will be taken to a page which tells them that since they have Javascript disabled, they’re probably not seeing what they should.

However, the one caveat here is that this third solution makes it difficult to debug the javascript inside the someFunction() function. If the function doesn’t behave as intended the developer will be taken to you_have_javascript_disabled.html and won’t see any Javascript errors.

So, for development, use solution #2. For production use solution #3.