Ajax URL Navigation Without JQuery

@jimmyoneshotJul 20.2011

Does anyone know of any good scripts for ajax navigation based on urls that only uses javascript and no JQuery?

i.e. I need to retrieve the relevant “sections” and “pages” from the following type of url to navigate my pages or more like to reload data into my page based on variables that are submitted in the url :-

~~[url]~~http://www.mysite.com/#!/page/section1/section2/section3[/url]

so if the url was:-

~~[url]~~http://www.mysite.com/profile/johnsmith/photos/johnshouse.jpg[/url]

These variables would be populated:-

$page would be assigned “profile”
$section1 would be assigned “johnsmith”
$section2 would be assigned “photos”
$section3 would be assigned “johnshouse.jpg”

And then I could load the relevant page and section and sub sections into my page.

Is this possible?

to post a comment

JavaScript

13 Comments(s) _↴

@jimmyoneshotauthorJul 20.2011 — #Any ideas?

@jimmyoneshotauthorJul 20.2011 — #Please??? ?

@rnd_meJul 20.2011 — #yeah, just split location.hash by "/" and you'll have an array of pieces you need.

use the onhashchange event to decouple links from your javascript code.

@jimmyoneshotauthorJul 20.2011 — #But how supported is the onhashchange event? I've heard not very much which could be a problem as I want to support most new and older browsers

@rnd_meJul 21.2011 — #it works in all current browsers.

you can use seemless libraries for backwards compat if it's important to you.

you would still use the same logic in your hashchange event whether it's real or poll-triggered...

a simple one or two line setInterval function can provide basic support, firing the event upon a change.

the libraries will create the proper event arguments, but you can also do those yourself.

it's a pretty simple feature which is easily added to browsers; the important part is organizing your urls well.

@jimmyoneshotauthorJul 21.2011 — #Thanks for the advice. I've made the following to test if I can get the onhashchange event working:-

[CODE]
 
 <script type="text/javascript" >
 
  function checkHashChange(event){
 
   if (('onhashchange' in window) || ('onhashchange' in document)){
   window.onhashchange = showURL();
   }else{
   window.setInterval("showURL()",200);
   }
 
  }
 
  function showURL(){
   document.getElementById('urlDisplay').innerHTML = window.location.hash;
  }
 
 </script>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body onhashchange="checkHashChange(event)">
 
 <a href="#1">1</a>
 
 <a href="#2">2</a>
 
 
 <p id="urlDisplay"></p>
 
 </body>
 </html>
 
 [/CODE]

This in theory should check if the browser supports onhashchange and use it if it does and if not use the aforementioned setinterval method. For now I simply want it to show anything that comes after the # every time anything after the hash changes and then I can go from there.

The problems this causes are the following:-

- In Chrome if I click on one of the anchor tags the links changes the first time i.e. if 1 is clicked #1 is shown in the "urlDisplay" however if I then click the other link it doesn't change to #2 and vice versa. It's as if the onhashchange event is only registering once and then never again.

Also the above code doesn't seem to work at all in IE8 i.e. the urlDisplay doesn't change each time the hash changes.

Can anyone please help me out with the above code?

@rnd_meJul 21.2011 — #don't put code before the html, it goes in the head of the document...

does this help?

[CODE]function checkHashChange(event){
 var lastHash=location.hash;
 if (('onhashchange' in window) || ('onhashchange' in document)){
 window.onhashchange = showURL;
 }else{
 window.setInterval(function hashmon(){
 if(lastHash!=location.hash){
 showURL({newURL: location.hash, oldURL: lastHash});
 lastHash=location.hash;
 }//end if change
 },200); //end of mon function
 }//end if native supprt?
 }//end checkHashChange()[/CODE]

i know it's 3 or 4 lines instead of one or two, but i added the crucial event props like firefox has...

@jimmyoneshotauthorJul 21.2011 — #Thanks very much for the help again. I've made some changes but unfortunately the onhashchange still only appears to work once in Chrome unless I'm missing something. I've changed showURL to navigateToUrl since earlier because that is what I eventually want to use to load segments of my page based on the url segements between forward slashes. Here's my full code now:-

[CODE]
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 <script type="text/javascript" >
 
  function navigateToUrl(){
 
   var urlArray = window.location.hash.split( '/' );
 
   var page = urlArray[1];
   var section1 = urlArray[2];
   var section2 = urlArray[3];
   var section3 = urlArray[4];
   document.getElementById('urlDisplay').innerHTML = page+"/"+section1+"/"+section2+"/"+section3;
 
  }
 
  function checkHashChange(event){
   var lastHash=location.hash;
   if (('onhashchange' in window) || ('onhashchange' in document)){
   window.onhashchange = navigateToUrl();
   }else{
   window.setInterval(function hashmon(){
   if(lastHash!=location.hash){
   navigateToUrl({newURL: location.hash, oldURL: lastHash});
   lastHash=location.hash;
   }//end if change
   },200); //end of mon function
   }//end if native supprt?
  }//end checkHashChange()
 
 
 </script>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body onhashchange="checkHashChange(event)" onload="navigateToUrl()">
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile">Profile</a>
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile/johnsmith">Profile/User</a>
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile/johnsmith/messages">Profile/User/messages</a>
 
 <p id="urlDisplay"></p>
 
 </body>
 </html>
 
 
 [/CODE]

@jimmyoneshotauthorJul 21.2011 — #I've just checked in several browsers and it now:-

- Works fine only in IE8

- Doesn't work in IE7

- In Chrome and Firefox the onhaschange event only seems to fire the first time it changes but never again when you click something after that

@rnd_meJul 21.2011 — #your changes keep breaking my code.

1.

window.onhashchange = navigateToUrl();

should be window.onhashchange = navigateToUrl;

2.

navigateToUrl should accept the event arg, why do you have it on checkHashChange?

3.

[COLOR="Red"] kill : onhashchange="checkHashChange(event)"[/COLOR]

4.

<body onload="checkHashChange()">

@jimmyoneshotauthorJul 21.2011 — #Ah Sorry about that my mistake. I've changed 1,3 and 4 how you suggested however I'm unsure what you mean about point 2.

I put the navigateToUrl function in there to process the variables held after the hash between slashes in the url whenever the hash changes.

It now works in Chrome fine, IE8 fine and Firefox fine but I'm not sure as to why it doesn't work in IE7.

You're great for being so helpful by the way. Thanks again.

Here's the updated code:-

[CODE]
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 <script type="text/javascript" >
 
  function navigateToUrl(){
 
   var urlArray = window.location.hash.split( '/' );
 
   var page = urlArray[1];
   var section1 = urlArray[2];
   var section2 = urlArray[3];
   var section3 = urlArray[4];
   document.getElementById('urlDisplay').innerHTML = page+"/"+section1+"/"+section2+"/"+section3;
 
  }
 
  function checkHashChange(event){
   var lastHash=location.hash;
   if (('onhashchange' in window) || ('onhashchange' in document)){
   window.onhashchange = navigateToUrl;
   }else{
   window.setInterval(function hashmon(){
   if(lastHash!=location.hash){
   navigateToUrl({newURL: location.hash, oldURL: lastHash});
   lastHash=location.hash;
   }//end if change
   },200); //end of mon function
   }//end if native supprt?
  }//end checkHashChange()
 
 
 </script>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body onload="checkHashChange()">
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile">Profile</a>
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile/johnsmith">Profile/User</a>
 
 <a href="http://www.mysite.com/ajaxnavigationtest.php/#!/profile/johnsmith/messages">Profile/User/messages</a>
 
 <p id="urlDisplay"></p>
 
 </body>
 </html>
 
 
 [/CODE]

EDIT - Oh I think you meant why did I have navigateToUrl in the body onload? I had it there in case the user refreshes the page, not sure if there's a better way

@rnd_meJul 21.2011 — #tested ie7, ie8, ff5

[CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 <script type="text/javascript" >
 
  function navigateToUrl(){
 
   var urlArray = window.location.hash.split( '/' );
 
   var page = urlArray[1];
   var section1 = urlArray[2];
   var section2 = urlArray[3];
   var section3 = urlArray[4];
   document.getElementById('urlDisplay').innerHTML = page+"/"+section1+"/"+section2+"/"+section3;
 
  }
 
  function checkHashChange(event){
   var lastHash=location.hash;
   if (  !navigator.userAgent.match("MSIE 7") && (('onhashchange' in window) || ('onhashchange' in document))  ){
   window.onhashchange = navigateToUrl;
   }else{
   window.setInterval(function hashmon(){
   if(lastHash!=location.hash){
   navigateToUrl({newURL: location.hash, oldURL: lastHash});
   lastHash=location.hash;
   }//end if change
   },200); //end of mon function
   }//end if native supprt?
 
   navigateToUrl();
 
  }//end checkHashChange()
 
 
 </script>
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 
 <body onload="checkHashChange()">
 
 <a href="#!/profile">Profile</a>
 
 <a href="#!/profile/johnsmith">Profile/User</a>
 
 <a href="#!/profile/johnsmith/messages">Profile/User/messages</a>
 
 <p id="urlDisplay" style="border: 3px solid #000; min-height: 1em; min-width: 4em; background:#ccc;"></p>
 
 </body>[/CODE]

@jimmyoneshotauthorJul 21.2011 — #Now that's perfect ?

Thanks so much for all the help my friend.

Hope this code helps others too.

All the best.

Also in #JavaScript _↴

important project using WebRTC and chrome want to mute page (mic and audio)Time Picker problems Why does return false work here? Doesn't seem like it should!

Success!

Help @jimmyoneshot spread the word by sharing this article on Twitter...

Tweet This

Ajax URL Navigation Without JQuery

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Ajax URL Navigation Without JQuery

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴