How to detect device's internet connection in jQuery Mobile

Question

I am creating this simple mobile web page for a survey using HTML5, CSS3, jQuery Mobile, jQuery UI, ASP.NET, C# and some jQuery Plugins. One of the requirements is to show a pop-up/ dialog (either javascript alert or a jQuery mobile dialog or much better if it's a jQuery UI dialog) that will notify user whenever there is no internet connection the device (specifically Android). Currently I have this code:

<link rel="stylesheet" href="../Scripts/jqueryui/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="../Scripts/jquery.mobile-1.1.0.css" />
<script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
    var online = window.navigator.onLine;
    if (!online) {
        alert('Please check your internet connection and try again.');
    }
    function checkInternet() {
        var online = window.navigator.onLine;
        if (!online) {
            alert('Please check your internet connection and try again.');
        }
    }
</script>

then I put the JavaScript function on the form's onsubmit event:

<form id="frmSurvey" runat="server" class="validate" onsubmit="checkInternet()">

It's working when I view it on a desktop/ PC browser but doesn't work on mobile at all. The jQuery Mobile error loading page.

Since, this ain't the requirment I tweaked the jQuery Mobile file commented out the error loading page message part and it doesn't appear anymore. I've tried Google-ing a lot searching for any related topics but not found any.

I'm really having a hard time making this possible. Please help me guys!

Thanks in advance!

Answer 1

There are few solutions that will suite your need.

Solution 1

This solution requires jQuery and because you are using jQuery Mobile it will work as a charm.

$.ajaxSetup({
    timeout: 1, // Microseconds, for the laughs.  Guaranteed timeout.
    error: function(request, status, maybe_an_exception_object) {
        if(status == 'timeout')
            alert("Internet connection is down!");
    }
});

For more info take a look at this official documentation about ajaxSetup.

Solution 2

This one is little bit tricky because it depends on HTML5 browser implementation.

Basically you need to check if this value is true or false:

window.navigator.onLine -- it will be false if the user is offline.

Working example: http://jsfiddle.net/Gajotres/VXWGG/1/

Tested on:

• Windows Firefox

• Windows Google Chrome

• Windows IE9 and IE10

• Android 4.1.1 Chrome

• iPad 3 Safari

• iPad3 Chrome