Shaun Mccran

My digital playground

17
O
C
T
2011

Adding hash values into URLs - The basics

Building a site that uses AJAX to Asynchronously import content into it? You can take advantage of the URL hash value and some of the functionality it gives you.

By inserting a hash character into the URL you can pick up the string following it and use it as a value in AJAX requests. Also you can create a listener event to check for a hash being added to a URL and use that to activate your custom JavaScript.

This blog entry is an intro to this process, where we deal with adding the hash value into a URL.

First of all we will create a set of hyperlinks that are attached to a JQuery selector.

view plain print about
1<ul>
2    <li><a href="home.cfm" class="ajax-link" id="home">Home</a></li>
3    <li><a href="about.cfm" class="ajax-link" id="about">About</a></li>
4    <li><a href="buy.cfm" class="ajax-link" id="buy">Buy</a></li>
5    <li><a href="contact.cfm" class="ajax-link" id="contact">Contact</a></li>
6</ul>

Note that they have a normal href attribute so that they still work without JavaScript. We'll stop the link actually firing in our function otherwise we will actually change the URL and end out at the page.

Next we create a simple click function.

view plain print about
1<s/cript language="javascript">
2    $(document).ready(function() {
3
4        // click event listener
5        $('.ajax-link').click(function(event) {
6
7            // get the id
8            var clickedLink = $(this).attr('id');
9
10            // push it into the url
11            location.hash = clickedLink;
12
13            // debugging alert
14            //alert(clickedLink);
15
16            // stop the regular href
17            event.preventDefault();
18        });
19    });
20</script>

This picks up any link clicked on and gets the id attribute. Next we use location.hash to push the value into the URL. Note that it adds an actual # character to the start of the string.

Lastly it prevents the hyperlink click event from firing so that we don't actually move to the new page.

A short and simple script to add hashed values to a URL. There is a demo of this working here: http://www.mccran.co.uk/examples/jquery-url-hashes/

Related Blog Entries

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Daniel C. Holloway's Gravatar I almost followed all the steps involved in it. At last I couldn't make it as I got struck with the query box asked. Finally I got to know about it from http://www.beestessays.com/ who helped in finding the right solution.
# Posted By Daniel C. Holloway | 04/06/15 01:56
replica handbags's Gravatar The website showcases the a lot of accident broad Replica dealers who action the latest accept to haves of the http://www.skyteamtrade.com appearance spectrum. accepting one of the exceptional Broad backpack suppliers is accustomed as one with a altered and agreeable alternative of products. This includes a ambit of contemporary handbags, wallets, backpacks and purses in leather, fabric, faux covering and added textures. The amazing ante offered on these arm candies are http://www.fashionreplicas.co.uk actual acceptable for aggregate purchase, authoritative the bell-ringer a hot admired a allotment of acclaimed clientele.This is why a lot of retailers attending for dependable bag dealers who accord apple chic articles at accomplished auction rates. If it comes to accouterment admission to acceptable wholesalers such as the acclaimed , the breadth is an awning website hosting all the advice and tips a bazaar or abundance buyer would need.
# Posted By replica handbags | 18/06/15 19:39
good academic writing's Gravatar I do have code pathway hash tags and it workings while I alteration from outline, News, and Gallery.
# Posted By good academic writing | 10/07/15 00:18
Alexi's Gravatar I have tried many ways to add hash values into URLs. But they didn’t work. After that I got this method and it worked successfully. So if you want to do this process easily, please try this. Keep updating! http://www.goldenagecheese.com
# Posted By Alexi | 21/08/15 04:50
WebsBerry's Gravatar If you feel like it distinctive every time, then add the time and date to the file name previous to doing the MD5 hash.
# Posted By WebsBerry | 01/09/15 22:54
Anastasia's Gravatar Everybody has a hopes for themselves and their future. However, what distinguishes a hope from a goal is the plan you make to realize it. When writing an essay about your school and career goals, you should show your ability to set goals as well as your understanding of the work, planning and responsibility achieveing these goals entails. <a href="http://super-essays-service.com">custom written essays</a>
# Posted By Anastasia | 24/09/15 01:54
Breast Augmentation's Gravatar Building a site that uses AJAX to Asynchronously import content into it? You can take advantage of the URL hash value and some of the functionality it gives you.
# Posted By Breast Augmentation | 03/10/15 07:02
top essay writing assistance's Gravatar good academic writers!
# Posted By top essay writing assistance | 03/11/15 03:53
Click to get's Gravatar After a long searching, finally i have got what I was looking for. I will these step and also share with my friends.
# Posted By Click to get | 05/11/15 04:45
Click to get's Gravatar After a long search, finally i have got what i was searching for. Now the work will go faster than before.
# Posted By Click to get | 05/11/15 04:50
amyahlom's Gravatar This picks up any link clicked on and gets the id attribute. Next we use location.hash to push the value into the URL. Note that it adds an actual # character to the start of the string.
http://ethehealthadvisor.com/alpha/
# Posted By amyahlom | 21/11/15 08:32
Local Plumbers's Gravatar where we deal with adding the hash value into a URL.
# Posted By Local Plumbers | 22/11/15 00:50
fiverr blog commenting's Gravatar Lastly it prevents the hyperlink click event from firing so that we don't actually move to the new page.
# Posted By fiverr blog commenting | 23/11/15 02:21
monthly backlink service's Gravatar wholesalers such as the acclaimed , the breadth is an awning website hosting all the advice and tips a bazaar or abundance buyer would need.
# Posted By monthly backlink service | 04/12/15 22:02
go now's Gravatar I just thought it may be an idea to post in case anyone else was having problems researching but I am a little unsure if I am allowed to put names and addresses on here.
# Posted By go now | 13/12/15 22:21
weight loss recipes's Gravatar I am very happy to read this article .. thanks for giving medical furniture manufacturer us go through info.Fantastic nice. I appreciate this post..
# Posted By weight loss recipes | 14/12/15 04:39
amazon tools's Gravatar Keep up the good work and please tell me when can you publish more articles or where can I read more on the subject...
# Posted By amazon tools | 17/12/15 00:22
cccam server's Gravatar I want you to thank for your time of this wonderful read!!! I definitely enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog....
# Posted By cccam server | 18/12/15 23:48
motorcycle accident attorney's Gravatar Great Article dealing with back links, I find myself having trouble with creating good links to my site keep up the good work....
# Posted By motorcycle accident attorney | 19/12/15 01:50
Xarelto Pulmonary Embolism Attorney's Gravatar I'm able to bookmark your site and show the kids check out up here generally. I m fairly positive there likely to be informed a great deal of new stuff here than anyone.
# Posted By Xarelto Pulmonary Embolism Attorney | 19/12/15 02:24
personal injury lawyer in los angeles's Gravatar Keep up the good work and please tell me when can you publish more articles or where can I read more on the subject...
# Posted By personal injury lawyer in los angeles | 19/12/15 11:54
nat vps's Gravatar broad Replica dealers who action the latest accept to haves of the http://www.skyteamtrade.com appearance spectrum. accepting one of the exceptional
# Posted By nat vps | 19/12/15 23:30
Billing And Coding's Gravatar Great Post This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this..Thank You!
# Posted By Billing And Coding | 21/12/15 02:45
los angeles accident lawyer's Gravatar I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts.
# Posted By los angeles accident lawyer | 21/12/15 23:53
cccam server's Gravatar therapy, he is back in Nanjing for another academic year. He attended his 23rd opening ceremony and banquet on September 14....
# Posted By cccam server | 22/12/15 02:10
jannete's Gravatar I can't say that I know everything about URLs., but the article is very interetsing :)P.S. Here, you can get greta essays - http://best-custom-essays.com
# Posted By jannete | 25/12/15 01:55
cures for tinnitus's Gravatar Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.
# Posted By cures for tinnitus | 26/12/15 01:04
cheap writing service org's Gravatar Firstly create a CurrencyFormatter object, and specify the currency symbol, and any other formatting parameters that you require.
# Posted By cheap writing service org | 26/12/15 02:23
this link's Gravatar Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long.
# Posted By this link | 28/12/15 02:02
buy garcinia cambogia's Gravatar Next we use location.hash to push the value into the URL. Note that it adds an actual # character
# Posted By buy garcinia cambogia | 28/12/15 05:23
resources's Gravatar I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog!!!
# Posted By resources | 29/12/15 01:11
this link's Gravatar Your site and show the kids check out up here generally. I m fairly positive there likely to be informed a great deal of new stuff here than anyone.
# Posted By this link | 29/12/15 01:44
targeted traffic's Gravatar I’m now working with WordPress for a couple of with this blogs and forums nonetheless wanting to switch one of them over to your stand akin to you for a trial offer perform.
# Posted By targeted traffic | 04/01/16 23:31
car rental jaipur to delhi's Gravatar The amazing ante offered on these arm candies are http://www.fashionreplicas.co.uk actual acceptable for aggregate purchase, authoritative the bell-ringer
# Posted By car rental jaipur to delhi | 05/01/16 02:26
sell amazon products's Gravatar I have feel that this blog is really have all those quality that qualify a blog to be a one.I wanted to leave a little comment to support you and wish you a good continuation.
# Posted By sell amazon products | 09/01/16 01:04
Back to top