Hey there, I've been tinkering with pure javascript to dynamically load content using AJAX without having to reload the entire page.
document.getElementById('dashboard').addEventListener('click', dashboard);
function dashboard(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'dashboard.php', true);
xhr.onload = function(){
if(this.status == 200){
history.pushState(null, null, '#dashboard.php');
document.getElementById('content').innerHTML = this.responseText;
} else if(this.status = 404){
document.getElementById('content').innerHTML = 'Not Found';
}
}
xhr.onerror = function(){
console.log('Request Error...');
}
xhr.send();
}
Although this code functions as intended, there is a slight hiccup when manually refreshing the page - it reverts back to the original content. For instance, navigating to another page and then hitting refresh will display the Dashboard again.
I'm looking for a way to retain the current page even after a manual refresh. Any insights would be much appreciated. Thanks!