www.webdeveloper.com
Results 1 to 14 of 14

Thread: Ajax URL Navigation Without JQuery

  1. #1
    Join Date
    Dec 2010
    Posts
    232

    Ajax URL Navigation Without JQuery

    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 :-

    http://www.mysite.com/#!/page/sectio...tion2/section3

    so if the url was:-

    http://www.mysite.com/profile/johnsm...johnshouse.jpg

    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?

  2. #2
    Join Date
    Dec 2010
    Posts
    232
    Any ideas?

  3. #3
    Join Date
    Dec 2010
    Posts
    232
    Please???

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.

  5. #5
    Join Date
    Dec 2010
    Posts
    232
    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

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.
    Last edited by rnd me; 07-21-2011 at 02:25 AM.

  7. #7
    Join Date
    Dec 2010
    Posts
    232
    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>
    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?

  8. #8
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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()

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

  9. #9
    Join Date
    Dec 2010
    Posts
    232
    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>

  10. #10
    Join Date
    Dec 2010
    Posts
    232
    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


  11. #11
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.
    kill : onhashchange="checkHashChange(event)"


    4.
    <body onload="checkHashChange()">

  12. #12
    Join Date
    Dec 2010
    Posts
    232
    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>
    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
    Last edited by jimmyoneshot; 07-21-2011 at 04:36 PM.

  13. #13
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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>

  14. #14
    Join Date
    Dec 2010
    Posts
    232
    Now that's perfect

    Thanks so much for all the help my friend.

    Hope this code helps others too.

    All the best.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles