19 tháng 12, 2007

A Better Ajax Back Button Solution

If you've spent any time coding an Ajax application you know that the one of the problems with Ajax is that it breaks the back button. You have probably seen solutions that use an iframe and a hash (#) in the url to fix this issue. While this works there is a much simpler way that I've been using in my applications for the last year or so.

The key is the A tag (also known as the anchor tag) and the name parameter with a hash in the url. The trick is to either dynamically create the element or to just change the value of the name parameter to the matching value of the hash.

Below is an example of changing the name of the anchor tag.

//Anchor Rename Object this could also be a simple function if preferred.
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorid){
this.anchorid=anchorid; //This is the id of the anchor element
this.anchorname=anchorname;
this.RenameAnchor(anchorname, anchorholerid);
};
AnchorRename.CreateObject.prototype={
RenameAnchor:function(anchorname, anchorid){
document.getElementById(anchorid).name = anchorname;
}
};

In this example you would pass in the new value of the name (which must be the same value as after the hash in the url) and the id of the anchor element.

Below is an example of dynamically creating the tag and name values.

//Anchor Rename Object
var AnchorRename=new Object();
AnchorRename.CreateObject=function(anchorname, anchorholderid){
this.anchorholerid=anchorholderid; //This is the id of the element to hold the new anchor
this.anchorname=anchorname;
this.RenameAnchor(anchorname, anchorholderid);
};
AnchorRename.CreateObject.prototype={
RenameAnchor:function(anchorname, anchorholderid){
var AnchorCode=document.createElement("a");
AnchorCode.setAttribute("name", anchorname);
document.getElementById(anchorholderid).appendChild(AnchorCode);
}
};
In this example you would pass in the new value of the name (which again must be the same value as after the hash in the url) and the id of the anchor element.

Now the question that you may be asking is how does creating or renaming the anchor element help with fixing the back button. That is where when you call the object comes into play. You need to create or rename the object before a link is clicked. So, I would recommend using an onmouseover and an onfocus event to call the create or rename of the element so that before a link is clicked the required anchor element will be created.

I hope that this post has shown an easier solution to fix the back button problem that occurs when we create Ajax applications. Now go out there and try using it on your applications!

0 Ý kiến:

Blog Hoc Tap :)) Blog Hoc Tap ;)) Blog Hoc Tap ;;) Blog Hoc Tap :D Blog Hoc Tap ;) Blog Hoc Tap :p Blog Hoc Tap :(( Blog Hoc Tap :( Blog Hoc Tap :X Blog Hoc Tap =(( Blog Hoc Tap :-o Blog Hoc Tap :-/ Blog Hoc Tap :-* Blog Hoc Tap 8-} Blog Hoc Tap :)] Blog Hoc Tap ~x( Blog Hoc Tap :-t Blog Hoc Tap b-( Blog Hoc Tap :-L Blog Hoc Tap x( Blog Hoc Tap =))

Đăng ý kiến của bạnBlog Hoc Tap

Đây là Web Blog dùng để "Ghi lại" trong quá trình làm việc và học tập. Bạn có thể đăng ý kiến để Đóng góp, Xây dựng, Trao đổi, Học tập với tôi. Cảm ơn bạn đã ghé qua web blog của tôi.
Bạn có thể sử dụng các biểu tượng cảm xúc trong bài "ý kiến" bằng cách gõ ký tự bên phải của mỗi biểu tượng.
Thân chàoBlog Hoc Tap

BlogWeb: tạo từ Blog của Google
Nội dung: lấy từ nhiều Nguồn khác nhau.
Mục đích: note lại bài Hướng dẫn hay và Đáng đọc.
Kết quả: nghiện Internet Nặng.
Tương lại: xuống lỗ Vẫn Nghiện nếu không có ai giúp.
Blog Web của: Trí Dũng đến từ Việt Nam - Liên kết đến trang Blog Cá Nhân
Tôi biết (^_^)
Thông tin về Tác giả. Chi Tiết
Sử dụng (FireFox | Google Chrome on Ubuntu) để xem tốt nhất. Học Nhiều Hơn Tại Đây
©2009 Google Blogger - HuuNguyen's Home