I need to update my page using Anchor (#) in URL

Question

index.php

<html>
 <head>
  <title>My Title</title>
  <script type="text/javascript">
   function getLink(data) {
    document.getElementById("box").innerHTML="This is "+data;
   }
  </script>
 </head>
 <body>
  <a href="#home" onClick="getLink('Home')">Home</a><br />
  <a href="#profile" onClick="getLink('Profile')">Profile</a><br />
  <a href="#message" onClick="getLink('Message')">Message</a><br />
  <a href="#setting" onClick="getLink('Setting')">Setting</a><br />
  <hr />
  <div id="box"></div>
 </body>
</html>

Output

Home
Profile
Message
Setting

This is Home

As the code says my Div contents updated when i click any of the link but the problem is that when user goes back by clicking Back Button of Browser the content of my Div donot changes.
I want that either user Goes Back, Goes Forward or he directly puts the path in the address bar www.*****/index.php#profile the content of my Div should be change.

Note
I used document.location.hash to get the value of hash like this :

<head>
 <script>
  var hashValue=document.location.hash;
  alert(hashValue);
 </script>
</head>

but it works only when user goes back and then refresh the page

Plz help me how can i achieve this :(

Use the [`hashchange` event](https://developer.mozilla.org/en-US/docs/Web/Reference/Events/hashchange). — Bergi, Jun 03 '13 at 11:50
One thing you can do is add a call to the getLink() function on DOM ready. On DOM ready, inspect your URL and check for a string after the last '#' char. If this string isn't null, call `getLink(theString)` — TCHdvlp, Jun 03 '13 at 11:51

score 2 · Accepted Answer · 2013-06-03T12:06:51.230

You need to use hashchange event:

function hash_changed() {
    var data = document.location.hash.substr(1);
    var box = document.getElementById("box");

    if (data) {
        // inner page
        box.innerHTML="This is " + data;
    }
    else {
        // homepage
        box.innerHTML = "";
    }
}

window.onhashchange = function () {
    hash_changed();
};

window.onload = function () {
    hash_changed();
};

Also when you are using hashchange event, there is no need to set onclick for your links:

<a href="#home">Home</a>
<a href="#profile">Profile</a>
<a href="#message">Message</a>
<a href="#setting">Setting</a>

When user click on a link, the hash automatically changes (with href attribute of link), and hashchange event get fired.

Check DEMO here.

First Time

When a user come to your page for the first time with a hash:

http://fiddle.jshell.net/B8C8s/9/show/#message

We must show the wanted page (message here), so we must run hash_changed() function we declare above, at first time. For this, we must wait for DOM ready or window.onload.

yup it works but will it works in all major browser , i mean browsers compatible with only HTML4 ?? — Abar Choudhary, Jun 03 '13 at 12:17
@AbarChoudhary Yes, it works in all browsers and IE8 and upper. And its interesting to know, IE8 is the first browser which introduce `hashchange` event `;)`. — , Jun 03 '13 at 12:39

score 0 · Answer 2 · answered Jun 03 '13 at 11:54

0

Check the HTML5 history API. It allows you to work with the browser history

HTML5 history api

answered Jun 03 '13 at 11:54

kfirbreger

109
5

score 0 · Answer 3 · answered Jun 03 '13 at 11:54

0

$(window).on('hashchange', function() {
     alert(location.hash);
});

or window.onhashchange event if you don't want to use jQuery

answered Jun 03 '13 at 11:54

AElsh

18
4

Glitch Desire · Answer 4 · 2013-06-03T12:20:40.500

0

If you're going to be using AJAX, you'll really want to look into using jQuery instead of raw javascript unless your intention is educational. jQuery is just a mainstay of the web now.

If you must use those hashes...

Use jQuery Special Events, and use the hashchange event:

<a href='#home'>Home</a>

Script:

$(window).on('hashchange', function() {
    $('#box').html("This is "+event.fragment);
});

However, for your scenario...

You don't need to use those # values at all as you're passing the values in your function arguments anyway according to the code you provided, just do this:

<a href="" onClick="getLink('Home');return false;">Home</a><br />

Alternatively (and preferably, as you're using AJAX according to the tags) you can use jQuery and its builtin selector click events which use Event Listeners:

<a href='javascript:void();' class='divLink' id='home'>Home</a><br/>

Script is this easy:

$('.divLink').click(function(){
    $('#box').html("This is "+$(this).id());
}

edited Jun 03 '13 at 12:20

answered Jun 03 '13 at 11:54

Glitch Desire

14,632
7
43
55

dear ur 1st method will open the same page all time i click any link, and second method will consider it as one URL so there will be no history of which link was clicked before – Abar Choudhary Jun 03 '13 at 12:13
@AbarChoudhary - Updated first answer. Try that. – Glitch Desire Jun 03 '13 at 12:20
There's a [demo too](http://jsfiddle.net/cowboy/wf4vF/) using the same methodology. – Glitch Desire Jun 03 '13 at 12:21

I need to update my page using Anchor (#) in URL

4 Answers4

First Time

Linked