I'm in a bit of a pickle here. I've been using History.js with the History API and everything was going smoothly until I encountered an issue. Let's start with a simple page setup like this:
<div ="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
My AJAX calls involve replacing the content of #content with new HTML, but the problem arises when a user navigates back to the initial page. It attempts to load the entire first page again, resulting in something like this:
<div ="header">
Header
</div>
<div id="content">
<div ="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="footer">
Footer
</div>
I know there must be a better way to structure my page to avoid this mess, but I can't seem to figure it out. Here's the code snippet I'm currently using:
(function(window,undefined){
var
History = window.History,
State = History.getState();
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
$.ajax({
url: History.getState().url,
cache: false
}).done(function( html ) {
$("#content").html(html);
});
});
})(window);
If you have any insights on how to tackle this issue properly, I'd greatly appreciate it!