I am not familiar with JavaScript so I’m still learning.
At our office we have two different servers monitoring our network (filecount, file availablity, etc.). Both servers produce a dashboard page every minute.
I want to view both dashboards, one after another, with an interval of 2 minutes and have the content of the dashboard refreshed without refreshing the entire web page as this is being displayed on a TV.
I have this working to a point where the two dashboards are displayed with the desired interval, but only the content of the two dashboards are not being updated/refreshed and I can’t figure out why.
I’ve created a web page with the below HTML:
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="autoUpdateVTS.js"></script>
<script type="text/javascript" src="autoUpdateIDS.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="VTS">
</div>
<div id="IDS" class="hide">
</div>
</body>
</html>
The CSS only contains data for the visibily of my DIV’s:
html,
body {
}
#VTS {
}
#IDS {
}
.hide { display: none !important; }
The first script is getting the content of the first dashboard and refresh the data every 20 seconds:
document.addEventListener("DOMContentLoaded", function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
xhr = new XMLHttpRequest();
}
return xhr;
};
updateVTS = function()
{
var url = 'http://vtc130/hm01/dashboard.htm';
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandlervts;
// asynchronous requests
xhr.open("GET", url, true);
xhr.send(null);
};
updateVTS();
function evenHandlervts()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('VTS');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 20 sec
setTimeout(updateVTS, 20000);
}
}
});
The second script is identical to the above but getting data from the second dashboard and put this in the other DIV.
script.js is used to toggle the visibility of the two DIV’s with the interval of 2 minutes:
window.addEventListener('load', function()
{
switchVTSIDS = function()
{
setInterval(function() {
VTS.classList.toggle("hide");
IDS.classList.toggle("hide");
}, 120000);
};
switchVTSIDS();
});
With the above setup the two DIV’s are toggeled as preferred, but the data the two DIV’s are not being refreshed/updated automatically.
The data from the DIV’s are loaded when i open the web page, but they don’t get updated automatically.
Hopefully someone can assist and point me in the right direction here.