Browser ‘back’ button problem

Hi everybody!
I’m scripting simplest AJAX request
On page I’ve got

[CODE]<% unless @user_favourites.include?(@entity.id) %>
<div id=”favourites_add_box” >
<a href=”?fav=added” onclick=”add_to_favourites(<%= @entity.id %>); return false;”>
<%= image_tag(“/images/go.gif”) %>
</a>
</div>
<% else %>
<div>Added</div>
<% end %>[/CODE]

and a javascript is

[CODE]<script type=”text/javascript”>
var http;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”) {

http = new ActiveXObject(“Microsoft.XMLHTTP”);

} else {
http = new XMLHttpRequest();
}
function add_to_favourites(eid) {
http.open(“get”, “/favourites/add/” + eid);
http.onreadystatechange = entity_added_response;
http.send(null);
return false;
}
function entity_added_response() {
if (http.readyState == 4) {
response = http.responseText;
a = document.getElementById(“favourites_add_box”);
if (a) a.innerHTML = “Added”;
}
}
</script>[/CODE]

The point is: when user click on the “add to favourites” link then content of <div> is replaced with text “Added” when ajax request successfully completed. This works fine. But when I go to another page on my site and then press ‘back’ browser button “Add to favourites” link is shown on page, like I’ve never pressed it before. If I reload page then proper text “Added” is shown.
So the problem is – after ajax call page is changed, but when I go to another page and press browser ‘back’ button page is shown unchanged.
Thanks everybody in advance.

Also in #JavaScript _↴