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

30 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. ohhh cooll saya baru tau bro ,.. thnks for your tutorial,

    http://syntax-x.blogspot.com

    ReplyDelete
  11. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói
    lý thuyết trò chơi trong kinh tế học
    đức phật và nàng audio
    hồ sơ mật dinh độc lập audio
    đừng hoang tưởng về biển lớn ebook
    chiến thắng trò chơi cuộc sống ebook
    bước nhảy lượng tử
    ngồi khóc trên cây audio
    truy tìm ký ức audio
    mặt dày tâm đen audio
    thế giới như tôi thấy ebook

    môi căng mọng của nàng khóa chặt lấy.
    Thời gian phảng phất như trôi qua cả một thế kỷ vậy, hai người mới tách ra, miệng thở hổn hển, trên mặt cũng bởi vì thiếu dưỡng khí mà đỏ bừng lên.

    Có lẽ trước cơn mưa gió thường có sự yên lặng, những ngày tiếp theo, Lưu Phong sống rất là tự tại, bên kia Yến Vương phủ cũng không có cử động. Ma giáo và Thái tử phi cũng không có làm ra chuyện gì bất lợi đối với Lưu Phong. Cuộc sống của Lưu Phong rất là thích ý. Cả ngày ngoại trừ chỉ dạy Tiểu Linh Nhi đọc sách, chính là cùng liễu Thanh Nghi tán tỉnh. Chỉ là Tố Nương từ sau một đêm tình, đối với hắn lãnh đạm hơn rất nhiều, có đôi khi cố ý lánh mặt hắn. Khiến cho Lưu Phong rất là buồn bực.

    Cũng may Liễu Thanh Nghi nhờ chỉ giáo của Lưu Phong, càng thêm nhiệt tình như lửa, làm cho cuộc sống của Lưu Phong tràn ngập niềm vui thú.
    Mười tám tháng chín, nhiệt độ của Hoa Hạ đế quốc đã bắt đầu giảm xuống, sáng sớm, Lưu Phong ăn xong điểm tâm, chuẩn bị tới Thiên Thượng Nhân Gian cùng Vương Bảo Nhi gặp mặt.

    Liễu Thanh Nghi giữ chặt Lưu Phong đang muốn xuất môn, thân thể tiến sát trong lòng của Lưu Phong, thân mật nói:" Công tử gia, đi nhớ quay lại sớm một chút a."

    Lưu Phong cười hắc hắc, đôi tay vuốt nhẹ bộ ngực Liễu Thanh Nghi một chút, Nữ nhân đã lên giường, Lưu Phong nhanh chóng cởi bỏ xiêm y của Liễu Thanh Nghi ra, để bộ ngực trần trụi trắng nõn lộ ra trước mắt mình.

    Ngực của nàng nhờ có Lưu Phong kích thích đã lớn hơn lúc trước mới vào Phượng viên rất nhiều.

    Nhìn hai núm vú đỏ hồng dựng đứng lên, Lưu Phong chậm rãi cúi đầu dùng lưỡi liếm lấy hai hạt anh đào mê người này, làm cho Liễu Thanh Nghi một trận kịch chấn, trong miệng cũng bắt đầu thốt ra những âm thanh rên rỉ mơ hồ.

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

    ReplyDelete
  13. 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
  14. I have been reading out a lot of your articles.
    I will certainly bookmark your Blog.
    Hybris Training
    Devops Training

    ReplyDelete
  15. Hello I am trying to the link is passed correctly but the page doesnt load

    ReplyDelete
  16. fast these is my code

    //
    ";
    include "top.php"; del_not_count($id);
    } else {
    include "top.php"; del_not_count($id);
    }
    ?>

    ";
    include 'foot.php';
    }?>

    ReplyDelete