So, the scenario is that when I’m writing AJAX code, a lot of the times I use a hyperlink to trigger an action. For example, look at the following code…

1
2
3
4
5
6
7
8
9
10
11

<a href="#" class="open_div">Open Div</a>
 
<div id="show_content" style="display:none">Show stuff here....</div>
 
<script type="text/javascript">
$(document).ready(function(){
	$(".open_div").click(function () {
		$('#show_content').show();
	});
});
</script>

Ok, so what that code is basically doing is displaying a link, with the anchor text, Open Div. When the link is clicked, the show_content div will appear, with the containing content.

But the problem is, if I clicked that link on the BrightCherry homepage (assuming the code was there), the URL would change to this…

Anyone else experience this? It’s not actually a problem, but it irritates me because I find it ugly and weird (probably because I’m very particular).

The Solution

The fix ISN’T to simply remove the hash (#) from the A TAG, because then the code won’t work.

To stop the trailing hash from the URL, you just need to do the following…

1
2

// replace the hash with the following
<a href="javascript:void(0);" class="open_div">Open Div</a>

Ahhh, that’s better.

Out of curiosity, has this problem actually bothered anyone else?

It’s a pretty cool effect, which I’m always using on a lot of projects. Here’s an example (click in the input field, and then click outside the input field):

1
2
3

<form>
<input type="text" value="Your Name" name="name" onblur="if (this.value == '') {this.value = 'Your Name';}"  onfocus="if (this.value == 'Your Name') {this.value = '';}" />
</form>