Technology Blog

Partners

WhichIsBest

Ads

ads
WhichIsBest

Wednesday, February 22, 2012

Change browser url without page reloading with ajax request using JavaScript, HTML5 history API, jQuery, PHP like Facebook, Github navigation menu

When you are working with ajax, the problem is that after you have loaded some content using ajax, you can't change the URL of the browser according to the content. Because of this, reloading the page causes the new ajax content to disappear and it shows the previous page. Although you can resolve this problem with having some hash tag in the URL, but having hash tag in the url for navigation won't be SEO friendly.



Do you ever wonder when you are working Facebook or Github in a HTML5 supported browser, when you click on the links, the content is loaded into the page using ajax and at the same time the URL changes in the browser according to the specific page but without hash tag in the URL.

This makes use of the HTML5 History API to change the browser URL without refreshing the page.

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.

Live Demo | Download Code

29 comments:

  1. tat's really awsum...! dis s wat am looking....

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Great post! Much easier to implement than I expected. One question though, is it possible to include a loading indicator between pages? Thanks.

    ReplyDelete
  4. error Undefined index: rel in codeignitor

    ReplyDelete
  5. I recommand to use (for Jquery>1.7):
    $(document.body).on('click', "a[rel='tab']" ,function(e){

    instead of:
    $("a[rel='tab']").click(function(e){

    So the function with work as well with dynamicly inserted content

    ReplyDelete
  6. Hi, thanks for your script.
    I have a questio: it's possible link a page like products.php?cat=1 and connect this page with sql? I obtain an sql connection error if I try to put this link in menu.
    Error:Warning: mysql_query(): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)

    Can you help me, thanks

    ReplyDelete
  7. Thank you very much, code is very helpful. Just what I was looking for !

    ReplyDelete
  8. I am using button in java page on click of that i am calling js function inside i am calling dialog box ...but on open event of dialog base page getting refereshed ...so how to avoid this....

    ReplyDelete
  9. hi,
    IE8 and window.history.pushstat Is there another way to solve this problem ie9 not working. Thank you for your help

    ReplyDelete
  10. if i will try to append with something in url for example ?src=sjfbvsjbr and then try to refresh it then ajax call won't work and it leads to the page which link has been clicked.how to resolve this problem

    ReplyDelete
  11. I really like your article. It’s evident that you have a lot knowledge on this topic. Your points are well made and relatable. Thanks for writing engaging and interesting material. web design tips

    ReplyDelete
  12. Oh my goodness! an excellent article dude. Many thanks However I am experiencing trouble with ur rss . Do not know why Not able to enroll in it. Will there be any person obtaining identical rss dilemma? Anyone who knows kindly respond. Thnkx website design agency

    ReplyDelete
  13. If it's not too much trouble note, as of now referenced, it isn't down the slope for your blog if there should be an occurrence of a high Spam Score. onion sites list

    ReplyDelete
  14. You can sprinkle this glitter on many shades but saturation of blue can really make it magical. Especially something like turquoise can nail it. After applying this beautiful color you can dip your fingers in gold glitter and take out exceptionally gorgeous glitter nails. bulk craft glitter

    ReplyDelete
  15. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me com.android.browser.home

    ReplyDelete
  16. They additionally have choice to get to all usefulness of the site by empowering the prearranging language assuming that it is cripple because of some explanation.https://twitchviral.com/

    ReplyDelete
  17. As well as adding new usefulness to your current kinds of content, some WordPress modules are intended to suit explicit sorts of site. http://wordpressctapro.com/

    ReplyDelete

WhichIsBest
WhichIsBest