Incorrect ajax hash navigation

Question

I want to use hashes for my navigation, but my script stores the original hash in #home every time the page loads, no matter what hash I add to the URL:

here is a script that tries to check if a hash exists and what to load inside #content:

$page = $('#content'); if(window.location.hash == 'home') { $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); } else if(window.location.hash == 'news') { $xmlFile = 'xml/news.xml'; $("#content").createNewsEntry(); } else if (window.location.hash == 'biography'){ $xmlFile = 'xml/bio.xml'; $("#content").createBioEntry(); } else if (window.location.hash == 'awards'){ $xmlFile = 'xml/awards.xml'; $("#content").createBioEntry(); } else if (window.location.hash == 'discography'){ $xmlFile = 'xml/discography.xml'; $("#content").createBioEntry(); }else{ alert('this should fire off because there is no hash but it doesnt'); $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); } 

May help me here or maybe tell me why this script sets the default value to #home.

Answer 1

window.location.hash returns a hash with a number sign.

This can be fixed using 1 of 4 methods. I also delete the first if , which is not needed.

Method # 1 (best): Remove # from the hash property

 $page = $('#content'); var hash = window.location.hash.substr(1); if(hash == 'news') { $xmlFile = 'xml/news.xml'; $("#content").createNewsEntry(); } else if (hash == 'biography'){ $xmlFile = 'xml/bio.xml'; $("#content").createBioEntry(); } else if (hash == 'awards'){ $xmlFile = 'xml/awards.xml'; $("#content").createBioEntry(); } else if (hash == 'discography'){ $xmlFile = 'xml/discography.xml'; $("#content").createBioEntry(); }else{ alert('this should fire off because there is no hash but it doesnt'); $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); } 

Method number 2 (the most efficient): use the switch and substr hash

 $page = $('#content'); switch (window.location.hash.substr(1)) { case 'news': $xmlFile = 'xml/news.xml'; $("#content").createNewsEntry(); break; case 'biography': $xmlFile = 'xml/bio.xml'; $("#content").createBioEntry(); break; case 'awards': $xmlFile = 'xml/awards.xml'; $("#content").createBioEntry(); break; case 'discography': $xmlFile = 'xml/discography.xml'; $("#content").createBioEntry(); break; default: alert('this should fire off because there is no hash but it doesnt'); $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); break; } 

Method # 3 (easiest): add a hash

 $page = $('#content'); if(window.location.hash == '#news') { $xmlFile = 'xml/news.xml'; $("#content").createNewsEntry(); } else if (window.location.hash == '#biography'){ $xmlFile = 'xml/bio.xml'; $("#content").createBioEntry(); } else if (window.location.hash == '#awards'){ $xmlFile = 'xml/awards.xml'; $("#content").createBioEntry(); } else if (window.location.hash == '#discography'){ $xmlFile = 'xml/discography.xml'; $("#content").createBioEntry(); }else{ alert('this should fire off because there is no hash but it doesnt'); $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); } 

Method # 4 (worst): use indexOf

 $page = $('#content'); if(window.location.hash.indexOf('news') === 1) { $xmlFile = 'xml/news.xml'; $("#content").createNewsEntry(); } else if (window.location.hash.indexOf('biography') === 1){ $xmlFile = 'xml/bio.xml'; $("#content").createBioEntry(); } else if (window.location.hash.indexOf('awards') === 1){ $xmlFile = 'xml/awards.xml'; $("#content").createBioEntry(); } else if (window.location.hash.indexOf('discography') === 1){ $xmlFile = 'xml/discography.xml'; $("#content").createBioEntry(); }else{ alert('this should fire off because there is no hash but it doesnt'); $xmlFile = 'xml/home.xml'; $("#content").createHomeEntry(); } 

Answer 2

Here

 window.location.hash == 'home' 

It returns not "home", it returns #home. Customize your hash or use it with C #. And for debugging, use alert(window.location.hash);