Pass hash value to Jquery .load() function

Question

I'm building a basic site where the user clicks a link and Jquery populates a div with id="article" via asynchronous request to the server, using Jquery's load(). This is the html:

<a href="#targetpage.html" onclick="menu('targetpage.html');"> TARGET PAGE</a>

That calls this very simple function:

var menu = function(page){ $('#article').load(page); //other code };

It works fine.

However, I want the user to be able to use permanent links such as www.mysite.com/index.html#targetpage.html and I expect the js to read the hash value in the URL and populate the div accordingly.

The problem is that when I try to pass the value window.location.hash to the function, (on load or on ready state), everything is stuck and my js doesn't work anymore. I also tried with the ajax() instead of load() function, but it doesn't accept the value either.

EDIT If I try

var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );

and type mysite.com/#page_one.html, the alert says:

page_one.html,

which is fine!!! But then

menu(hash);

doesn't load the content of the page_one.html into the div. However, clicking on my menu works fine. In the js console I have no errors nor warnings of any kind. Here's the whole code involed:

<head><script type="text/javascript" charset="iso-8859-1">
var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );
alert(hash);
menu = function(page){
    $('#article').load(page);
    };
menu(hash);
</script>
</head>
<body>
<div id="menu">
<ul>
<li><p class="menuvoice">
        <a href="#page_one.html" onclick="menu('page_one.html');">
            Page One</a></p></li>
<li><p class="menuvoice">
        <a href="#page_two.html" onclick="menu('page_two.html');">
            Page Two</a></p></li>
</ul>
</div>
<div id="article"></div>

Are you looking to load an element from the target page with the id attribute of targetpage.html? The fact you have .html at the end of the anchor seems strange if this is the case. — Rory McCrossan
– Rory McCrossan, Commented Apr 25, 2012 at 8:13
Yes you're right, of course appending .html is not necessary, I'm using it just as a convention. — mastazi
– mastazi, Commented Apr 25, 2012 at 8:18

Gaet · Accepted Answer · 2012-04-25 08:30:43Z

1

Do you have any error output coming in your console? This would help to identify the problem.

You could try to alert the retrieved hash value before sending it to your "menu" function so you will know if its correct (I wonder if the # symbol is not attached to the hash, which would pose a problem in your case, I suppose)

answered Apr 25, 2012 at 8:30

Gaet

6893 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mastazi Over a year ago

Yep, I'm getting rid of the hash sign. See the edit for more explanation!

Gaet Over a year ago

Based on your edit, I would say your problem comes from the fact that your "article" div doesn't exist yet when you call your "menu" function in the head. Try to wrap your code in a ready handler and see if it works like this

<script type="text/javascript" charset="iso-8859-1">$(function () { var thispage = document.location.hash; var hash = thispage.replace( /^#/, '' );  menu = function(page){     $('#article').load(page);     }; menu(hash);}); </script>

mastazi Over a year ago

Yes!!! You are absolutely right, the code must be executed after the page is loaded!!! I wrapped menu(hash); this way: window.onload = function(){menu(hash)}; and now it works perfectly, thank you mate!

Christian Romeni · Accepted Answer · 2012-04-25 08:31:55Z

1

Try this:

var hash = window.location.hash;
if (hash) {
  var hash = hash.replace(/#/, '');
  // Your function using hash
}

answered Apr 25, 2012 at 8:31

Christian Romeni

1921 silver badge10 bronze badges

1 Comment

mastazi Over a year ago

yes I'm doing it, but my menu function doesn't accept the hash value. See the edit for more info!

VisioN · Accepted Answer · 2012-04-25 08:32:21Z

1

How about using jQuery hashchange plugin?

http://benalman.com/projects/jquery-hashchange-plugin/

It will handle the work on parsing your current hash when it changes (i.e. when you click a link or reload the page with new hash).

EDIT. Example usage:

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
});

edited Apr 25, 2012 at 8:32

answered Apr 25, 2012 at 8:25

VisioN

146k35 gold badges287 silver badges291 bronze badges

1 Comment

mastazi Over a year ago

Thank you the plugin seems useful! However, at the moment I just need to read the hash when the page loads (e.g. someone types mysite/#some_hash) and not at every single hash change (see the code above for more info).

Collectives™ on Stack Overflow

Pass hash value to Jquery .load() function

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related