I have a JSON database that is updated frequently, and based on this data, I update the content of my webpage. Currently, I am using the following script to reload:
var previous = null;
var current = null;
setInterval(function() {
$.getJSON("sampledatabase.json", function(json) {
current = JSON.stringify(json);
if (previous && current && previous != current) {
console.log('refresh');
location.reload();
}
previous = current;
});
}, 1200);
The issue is that this script is meant for monitoring on a large screen in fullscreen mode, so the page blink during reloading is quite distracting.
During the refresh process (triggered by updating the database), I change the class of certain divs and display additional data from the database in them. Here's a snippet of the code:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var i;
var output = document.getElementsByClassName("env");
var myObj = JSON.parse(this.responseText);
for (i = 0; i < output.length; i++) {
if (myObj.instances[i].status == "UP") {
output[i].classList.add("passed")
} else
output[i].classList.add("notPassed")
output[i].innerHTML = "<span class=\"originalsize\">" + myObj.instances[i].id + "</span><br>" + myObj.instances[i].time
}
}
};
xmlhttp.open("GET", "sampledatabase.json", true);
xmlhttp.send();
Is there a way to update only the divs without causing the unpleasant blink when the page reloads?