Jump to content


* * * * * 1 votes

Change browser url without page reloading with ajax request using JavaScript & HTML5 history API

html5 javascript ajax

  • Please log in to reply
No replies to this topic

#1 nirajan

nirajan

    Administrator

  • Administrators
  • 138 posts

Posted 23 October 2013 - 08:32 AM

Consider a page that has the following links to three menu items and a div to display the ajax content.
<div id="menu">
 <a href="menu1.php" rel="tab">menu1</a> |
 <a href="menu2.php" rel="tab">menu2</a> |
 <a href="menu3.php" rel="tab">menu3</a>
</div>

To override the default action for the link(anchor tag), use the following jQuery code snippet.

$(function(){
  $("a[rel='tab']").click(function(e){
	//code for the link action
	return false;
  });
});

Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.


$(function(){
  $("a[rel='tab']").click(function(e){
	//e.preventDefault();
	/*
	if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
	if commented, html5 nonsupported browers will reload the page to the specified link.
	*/

	//get the link location that was clicked
	pageurl = $(this).attr('href');

	//to get the ajax content and display in div with id 'content'
	$.ajax({url:pageurl+'?rel=tab',success: function(data){
	  $('#content').html(data);
	}});

	//to change the browser URL to the given link location
	if(pageurl!=window.location){
	  window.history.pushState({path:pageurl},'',pageurl);
	}
	//stop refreshing to the page given in
	return false;
  });
});
For this HTML5 History API, the back button functionality won’t work as normal. So we need to override back button to get the ajax content without reloading the page.
To do this add the following code snippet in the page.

/* the below code is to override back button to get the ajax content without page reload*/
$(window).bind('popstate', function() {
  $.ajax({url:location.pathname+'?rel=tab',success: function(data){
	$('#content').html(data);
  }});
});

For the HTML5 History API non supported browsers, those links will reload the page to the specific location. But if its supported, you are lucky; it will get only the required content using ajax and display it without reloading the entire page.

DEMO





Also tagged with one or more of these keywords: html5, javascript, ajax