CODEWITHSUNDEEP
javascripthtmlxmlhttprequestgetelementbyid
Robert van Ierland
Robert van Ierland

Reputation: 11

How to periodically refresh web page content and switch between two DIV's?

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 now = new Date();
        var url = 'http://vtc130/hm01/dashboard.htm'; + now.getTime();
        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.

Upvotes: 0

Views: 69

Answers (1)

Robert van Ierland
Robert van Ierland

Reputation: 11

For whoever might run into the same issue, I was able to solve this using a different solution by only creating one connection and using Fetch instead of XMLHttpRequest to update both DIV's as it seems multiple simultanious connections were not allowed on our local server:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VTS en IDS Dashboard</title>
    <style>
        #div1, #div2 {
            div2.display: none; /* Initially hide the second div */
        }
    </style>
</head>
<body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>

    <script>
        let currentDiv = 1; 
        
        // Function to fetch new content for a div from an external HTML page
        function fetchContent(divId) {
            const fileName = divId === 'div1' ? 'http://vtc130/hm01/dashboard.htm' : 'http://vtc130/hm01/dashboardIDS.htm';

            fetch(fileName)
                .then(response => response.text())
                .then(data => {
                    const div = document.getElementById(divId);
                    div.innerHTML = data; 
                })
                .catch(error => {
                    console.error("Error loading content:", error);
                });
        }

        // Function to switch visibility of the two divs
        function switchDivs() {
            document.getElementById('div' + currentDiv).style.display = 'none';

            currentDiv = (currentDiv === 1) ? 2 : 1;

            document.getElementById('div' + currentDiv).style.display = 'block';
        }

        // Initially load content for both divs
        fetchContent('div1');
        fetchContent('div2');

        // Periodically refresh content for both divs every 20 seconds
        setInterval(function() {
            fetchContent('div1');
            fetchContent('div2');
        }, 20000); 

        // Switch visibility every 2 minutes
        setInterval(function() {
            switchDivs();
        }, 120000); 
    </script>
</body>
</html>

Upvotes: 1

Related Questions