I'am trying to create a website where all pages are called with Ajax. When I click on any link on the page, the url and page content changes without refreshing all page (similar Facebook). So far everything is fine.
The problem is : When I click the go back or go forward button, the url changes but the page content does not change.
Example code :
function loadDoc($link) { // example for $link : /example.php
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var parser = new DOMParser();
var doc = parser.parseFromString(xhttp.responseText, "text/html");
var elem = doc.getElementById("content");
document.getElementById("content").innerHTML = elem.innerHTML;
}
};
xhttp.open("GET", $link, true);
xhttp.send();
window.history.pushState('', 'Settings', $link); // dynamic url changing
}
(Fully separate structure or additional ideas are welcomed too)
You've used pushState to add an entry to the browser history, but you haven't added an event handler to determine what happens when the browser navigates back. The browser won't automatically memorise the state of the DOM for you.
Here is a simple example:
<div id="content">1</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<script>
const div = document.querySelector('div');
addEventListener('click', event => {
if (event.target.tagName.toLowerCase() !== 'button') return;
const last = div.textContent;
const next = event.target.textContent;
div.textContent = next;
history.pushState({ value: next }, `Page ${next}`, `/page/${next}`);
});
addEventListener('popstate', event => {
let state = event.state;
if (state === null) {
// special case: This is the state before pushState was called
// We know what that should be:
state = { value: 1 };
}
div.textContent = state.value;
console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});
</script>