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="m1.php" rel="tab">menu1</a> | <a href="m2.php" rel="tab">menu2</a> | <a href="m3.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.
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); }});});
Leave a Reply