I am attempting to run a JavaScript function that checks for internet connectivity status. If the user is connected to the internet, I do not want anything to happen on screen. However, if the connection is lost, I would like to display a div element.
The div will cover the entire screen, preventing the user from interacting with the page in the background until the connection is re-established. Once the connection is back up, the div should disappear automatically, allowing the user to interact with the buttons on the screen again.
To accomplish this, I have a JavaScript function that checks connectivity every second using an AJAX post to a PHP file. The PHP file echoes back "1" to the JavaScript, indicating an active connection. If no response is received, it signifies a broken connection and prompts the display of the div element called "openOfflineDIV."
Here is the snippet of my JavaScript code:
function checkConnection() {
if($.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
async: false
}).responseText == "1"){
console.log("Connection active");
openOfflineDIV.style.visibility = 'hidden';
}
else{
console.log("Connection lost");
openOfflineDIV.style.visibility = 'visible';
}
};
This setup seems to be causing a specific error related to synchronous XMLHttpRequest, even after modifying the code as suggested in various sources. I have also attempted different approaches to handle the situation without success.
If anyone could offer guidance or assistance in resolving this issue, I would greatly appreciate it. Thank you in advance!
Latest Update:
I made changes to my code based on a recommendation but encountered challenges getting the div to appear when the connection is lost. Although the console displays "disconnected" when appropriate, the div does not show up, leading me to seek further assistance in debugging the issue.