design@brightcherry.co.uk
Call us on   01279- 729075

Ok, this is a quick note to myself, because I always seem to forget this code, and I have no idea why, because it’s so simple.

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…

Trailing Hash

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?

This blog post was written on 25 Apr 2010 by Maruf, and has 2 Comments so far

  1. Timmo
    31/05/2010

    I think there is a better solution for this problem. Prevent the default action when clicking the A-element. Use this:
    $(“.open_div”).click(function(event){
    event.preventDefault;
    $(‘#show_content’).show();
    });
    This way you don’t have to assign the ‘href’-attribute.

    Good luck!

  2. Martin Medina
    22/08/2010

    is there any way to avoid firefox and ie to reload the page adding the hash-tag to the url.

    due to that i refine results by time with adding &as_qdr=d to the end of url, i have a problem with theese hashtags.

    It does not happen with Chrome, but Firefox reloads the page after query adding this nightmare hash d?=¿)a¿?)!!m!!”!”·n

    I am terribly stuck since weeks, and i must say that i never had such a problem finding a solution to a programming issue like this time

    my form is here: http://infoprofesionales.es/pageID_results.html

    I need a script to block Firefox (at least) to reload adding the hash-tag

Learning & sharing

This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.

Please feel free to contrinute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.

Social

Feel free to share this blog post and/or subscribe to our RSS feed :)