I am really new to JS/jQuery/Ajax I have this code. I want that the content in article tag change but to keep all the rest (header, menu and footer) stays the same while the user click on a link of on the website. I absolutely don't want to have the full page reloading entirely because it causes a poor user experience. This works perfectly and the code is loading the new page, title is changing when you click on a link BUT the back button of the browser does no longer works, title is still the same as the page I was on, really annoying. What should I do to fix this really annoying issue?
$(function() {
var $article = $("article"),
init = function() {
// Do this when a page loads.
},
ajaxLoad = function(html) {
document.title = html
.match(/<title>(.*?)<\/title>/)[1]
.trim();
init();
};
init();
$(document).on("click", "a, area", function() {
var href = $(this).attr("href");
history.pushState({}, '', href);
$article.load(href + " article>*", ajaxLoad);
return false;
});
});
Thanks so much for your help!
I added that after the last init()
and it works perfectly!
$(window).on("popstate", function(e) {
if (e.originalEvent.state !== null) {
loadPage(location.href);
}
});
loadPage = function(href) {
$article.load(href + " article>*", ajaxLoad);
};