7

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!

Gajotres
  • 57,309
  • 16
  • 102
  • 130
joecoder
  • 93
  • 1
  • 1
  • 9

1 Answers1

10

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

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 2
    According to [this](https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.onLine#Browser_compatibility), [this](http://stackoverflow.com/a/2384227/1469208) and [this](http://stackoverflow.com/a/4813406/1469208), `navigator.onLine`, though being part of HTML5, **is correctly supported only in Chrome and WebKit-based browsers**! Other browsers returns `true` always or -- return `true` when `Work Offline` mode is disabled and `false` when it is enabled, regardless of actual connectivity. – trejder Aug 06 '13 at 13:17
  • 1
    I have veryfied this, using [a simple jsFiddle example](http://jsfiddle.net/Gajotres/VXWGG/1/), that I found (not mine). It works fine in Chrome, fails completely (always returning `true` since I haven't enabled `Work Offline`) in Firefox. I don't know, if this is working in IE, because... it hangs like a poor beggar, on any jsFiddle page (lame, lame browser)! :] – trejder Aug 06 '13 at 13:24
  • Note, the documentation for ajaxSetup currently states "we strongly recommend against using this API". – tjmoore May 12 '15 at 12:24