Bookmarkable pages that are loaded by ajax

bookmark.html

<a href='#t-rex' onclick='return getDinoInfo("t-rex");'>T-Rex</a><br /> 
<a href='#brachiosaurus' onclick='return getDinoInfo("brachiosaurus");'>Brachiosaurus</a><br /> 
<a href='#pterodactylus' onclick='return getDinoInfo("pterodactylus");'>Pterodactylus</a> 
 
<div id='dino-details'></div> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type='text/javacript'> 
$(document).ready(function() { 
    //makes sure that the window.location.hash exists  
    //and is returning a nice string     
    if (typeof(window.location.hash) == "string") { 
         
        //get rid of the # on the string 
        var hash_result = window.location.hash.replace('#', ''); 
         
        //we have some data after the hash to work with! yay! 
        if (hash_result != "") { 
            getDinoInfo(hash_result); 
        } 
         
     }    
}); 
 
function getDinoInfo(dino_id)  
{ 
    if (dino_id != "") { 
        //set the hash on the window to our new value 
        window.location.hash = "#" + dino_id; 
          
        //makes the Ajax call 
        $.getJSON("/get_dino_info.php", { id: dino_id }, function(data) { 
            //put the results on the page! 
            $("#dino-details").html(data.info); 
        }); 
    } 
     
    //returning false here allow to call the function without 
    //following the 'href' property on the 'a' tags 
    return false; 
}     
</script>