$(document).ready(function() {
ajax_clicks();
});
function ajax_clicks() {
$('a.home_ajax_link').click(function() {
var url = '/'+$(this).attr('href'),
page = $(this).attr('page');
$.ajax({
url: url,
dataType: 'json'
}).done(data) {
$('body').attr('page', 'body-'+.event.state.page');
$('title').text(data.title);
$('.ajax_container').html(data.html);
history.pushState({ page: page, title: data.title, html: data.html }, "", "/home");
});
});
}
window.onpopstate = function(event) {
$('body').attr('page', 'body-'+.event.state.page');
$('.ajax_container').html(event.state.html);
document.title = event.state.title;
}
In similar way I coded my SPA-Cart: