I’m trying to run a Javascript function to check internet connectivity status. If the user is connected to the internet then I don’t want anything to happen on screen. But if the connection is lost then I want to show a div.
(This div will take up the entire screen (which will stop the user from interacting with the page in the background) until the connection is re-established. Once the connection is re-established, the div should automatically disappear and the user should be able to interact with the buttons on screen again.)
To achieve this, I have a Javascript function to check connectivity which runs every second. It does this by using an AJAX post to a PHP file, the PHP file echos “1” back to the Javascript, if the function receives this “1” back, then it knows the connection is active, if it doesn’t receive it then it knows the connection is broken and it should show the div.
The div is called “openOfflineDIV”.
This is my Javascript:
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';
}
};
My PHP file:
<?php echo '1'; ?>
And the relevant parts of my HTML page:
//Head content (file containing “checkConnection();” is included here)
<body>
<script>
setInterval(function(){
checkConnection();
},1000);
</script>
//Body content here
//DIV to show when connectivity is lost:
<div id="openOfflineDIV" class="modalOfflineDIVDialog">
<div id="mfs">
<div id="wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
</tr>
</table>
</div>
</div>
</div>
</body>
When I load up the page I see that the console writes “Connection active” every second. But I also get the following error in the console:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/
After looking into it it seems like it’s due to me having async = false in my Javascript, but when I remove this, it still doesn’t work.
I looked at the answers here: How do I return the response from an asynchronous call? And I have tried to implement the top answer by changing my code to this:
function checkConnection(result) {
if(result == "1"){
console.log("Connection active");
openOfflineDIV.style.visibility = 'hidden';
}
else{
console.log("Connection lost");
openOfflineDIV.style.visibility = 'visible';
}
}
foo(checkConnection);
function foo(callback){
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: callback
});
}
This still isn’t working, it keeps writing “Connection lost” in the console, which makes me think that maybe it’s not waiting for the “1” to get returned from the PHP file.
I would really appreciate any help anyone could give me with this, I’ve tried implementing the answers I’ve found on here but so far have been unsuccessful, thank you in advance!
UPDATE
This is my current code using @andreas's answer:
function checkConnection() {
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: function() {
$("#openOfflineDIV").hide();
console.log("connected"); },
error: function() {
$("#openOfflineDIV").show();
console.log("disconnected"); }
}).complete(function() {
setTimeout(checkConnection, 1000);
});
}
$(document).ready(checkConnection);
For some reason the div isn't appearing when the connection is lost, but "disconnected" does appear in the console every second, and "connected" appears whenever the connection is active.
UPDATE 2
This is another attempt to achieve the same result:
function checkConnection() {
$.ajax({
url: 'php_scripts/checkconnection.php',
type: "POST",
success: function() {
document.getElementById('openOfflineDIV').style.display = 'none';
console.log("connected"); },
error: function() {
document.getElementById('openOfflineDIV').style.display = 'block';
//I have also tried: document.getElementById('openOfflineDIV').style.display = 'inline';
console.log("disconnected"); }
}).complete(function() {
setTimeout(checkConnection, 1000);
});
}
This method is half working, meaning that if I navigate to my webpage address with /#openOfflineDIV added to the end of it, then the page will load with the div showing on screen, this then disappears after a second once the function starts to run (which means the function is closing the div successfully once it realises the connection is active).
But the second part of the function isn't working, it's not displaying the div when the internet connection is lost. I've tried both the inline and block methods but neither is working. I'm very confused since the function is definitely able to hide the div successfully (which I think means my syntax for defining the div is correct).
Is there something I'm missing here? Might I need to include an extra script on the page or something like that to make this work?
