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: ```

Accepted Answer

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

How to detect device's internet connection in jQuery Mobile

Solution

Problem

Related problems