12
I am trying to make ajax work with the back button and am missing something central. Where are the previous page states stored?
CASE 1:
Click "make me red". ajax event occurs and page turns red. Hash = #red
Click "make me yellow". ajax event occurs and page turns yellow. Hash = #yellow
Click back button. Hash is now back to #red. But I also want the page to be red. It's still yellow.
CASE 2:
Click "make me red". ajax event occurs and page turns red. Hash = #red
Click "Go to other site". It goes to Google.
Click back button. We're back to site, hash = #red, but I also want the page to be red!
<!DOCTYPE html>
<html>
<style>
.red{background:red}
.yellow{background:yellow}
</style>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.ajax_thing').click(function(){
location.hash=$(this).attr('action_type');
return false
})
var originalTitle=document.title
function hashChange(){
var page=location.hash.slice(1)
if (page!=""){
$('#content').load(page+".html #sub-content")
document.title=originalTitle+' – '+page
}
}
if ("onhashchange" in window){ // cool browser
$(window).on('hashchange',hashChange).trigger('hashchange')
}else{ // lame browser
var lastHash=''
setInterval(function(){
if (lastHash!=location.hash)
hashChange()
lastHash=location.hash
},100)
}
})
</script>
</head>
<body>
<menu>
<li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li>
<li>&l