I have searched through StackOverflow and have seen various topics on how to do this, but nothing that really pertains to my particular situation. I am writing (for a class)
try to set up ajaxSetup to do a request every n milliseconds (i put 1000 here) and check if it times out and then disable button.
$.ajaxSetup({
timeout: 1000,
error: function(request, status, maybe_an_exception_object) {
if(status != 'timeout')
//Code to enable button
else
//Code to disable button
}
});
Using window.navigator.onLine
is inherantly unreliable, because the user might be connected to a network, but that network could not have internet access.
However, here is a barebones example
<!DOCTYPE HTML>
<html>
<head>
<title>Online status</title>
<script>
function updateIndicator() {
document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline';
}
</script>
</head>
<body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()">
<p>The network is: <span id="indicator">(state unknown)</span>
</body>
</html>
See the fiddle in action: http://jsfiddle.net/3rRWK/
You could use
if (navigator.onLine) {
// I'm online so submit the form.
}
Here is what I would do, based upon: how to check if the user has the connection to the internet
First, use a javascript library link to determine if user is online. If true change the action property of your form to the online page, else the offline page.
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js></script>
<script>
$('#target').submit(function() {
if (typeof window.$ !== 'function') {
$('myform').attr( "action" , "offlinepage.html" );
}
else
{
$('myform').attr( "action" , "onlinepage.html" );
}
});
</script>
You actually don't need jQuery for this at all. HTML5 itself has a neat facility for applications ran in online/offline conditions - cache manifest. The cache manifest is a plain text file referenced in the manifest
attribute of <html>
tag:
<html manifest="cache.manifest">
The contents of this manifest file tells the browser, which resources need online conditions to function (NETWORK
), which files to cache (CACHE
) and what to do when network resource is requested while offline (FALLBACK
).
CACHE MANIFEST
# the above line is required
NETWORK:
*
FALLBACK:
* error404.html
CACHE:
index.html
about.html
help.html
# Plus all other resources required to make it look nice
style/default.css
images/logo.png
images/backgound.png
When using manifest, browser first consults the manifest and, without any scripting, acts accordingly based on being online or offline.
http://dev.w3.org/html5/spec-preview/offline.html#manifests
UPDATE:
Please note the crucial requirement on response content type. Plain text simply doesn't work.
Manifests must be served using the
text/cache-manifest
MIME type.
http://dev.w3.org/html5/spec-preview/offline.html#writing-cache-manifests
Also be aware that all URLs not listed in the manifest are blocked from load as a result. That's why I've fixed the above manifest with wildcards (*
) to allow "the rest". That might help you get started.
You can either check the navigator.onLine
property or listen to the offline
/online
events:
$(document).on('offline online', function (event) {
alert('You are ' + event.type + '!');
});
Source: http://www.html5rocks.com/en/mobile/workingoffthegrid/
And here are some MDN docs for these events: https://developer.mozilla.org/en/Online_and_offline_events
I'm not familiar with these events myself, but if you read the above links, you should find a lot of good information.