Is there a way to tell the user that there's no internet connection when they press submit?

Question

Assuming there is no internet connection, of course. Like a jQuery method?

Denys Séguret · Accepted Answer · 2012-09-26T18:22:09.703

10

I would try to make HEAD requests (no content downloaded) to a few servers you know are online. They will automatically fail if there is no network (no need to set a timeout).

$.ajax({
    type: "HEAD",
    url: 'http://www.google.com',
    error: function() {
        alert('world is gone !');
    }
});

DEMONSTRATION (unplug your network to test)

edited Sep 26 '12 at 18:22

answered Sep 26 '12 at 17:46

Denys Séguret

372,613
87
782
758

This is actually very nice. You don't have to do additional work on your server logic. Here, have a +1 :) – Adriano Carneiro Sep 26 '12 at 17:50
Note that the server must allow cross domain queries or be the origin one. – Denys Séguret Sep 26 '12 at 17:55
Hmm, clever, but I don't think this is necessary. Checking `navigator.onLine` should be sufficient -- see my answer. – Chris Sep 26 '12 at 17:57
and what happen if google does not be accessible? – Afshin Sep 26 '12 at 18:00
@afshin ... the WORLD IS GONE! – teewuane Sep 26 '12 at 18:00
1

I'm not joking for sample in my country google is not accessible for 4 days until now – Afshin Sep 26 '12 at 18:02
Generally, the most interesting is to check the server you would access. "No network" isn't really much more interesting than "No route to the important server". – Denys Séguret Sep 26 '12 at 18:24

score 2 · Answer 2 · answered Sep 26 '12 at 17:45

2

If you are dealing with ajax requests, you can catch timeout error - see error(jqXHR, textStatus, errorThrown) in $.ajax reference.

answered Sep 26 '12 at 17:45

moonwave99

21,957
3
43
64

Adriano Carneiro · Answer 3 · 2012-09-26T17:53:18.180

1

Sort of, yes. Before the actual submission, you can have an ajax call try to connect to a simple lightweight service on your site just to check if it is reachable.

If the call fails, you can assume there's no connection.

edited Sep 26 '12 at 17:53

answered Sep 26 '12 at 17:45

Adriano Carneiro

57,693
12
90
123

score 0 · Answer 4 · answered Sep 26 '12 at 17:51

With help of failed XHR requests you can determine the connection. Retry few times , if the request doesnot go through, alert and fail gracefully.

I can use this function which I got from http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/

$.networkDetection = function(url,interval){
    var url = url;
    var interval = interval;
    online = false;
    this.StartPolling = function(){
        this.StopPolling();
        this.timer = setInterval(poll, interval);
    };
    this.StopPolling = function(){
        clearInterval(this.timer);
    };
    this.setPollInterval= function(i) {
        interval = i;
    };
    this.getOnlineStatus = function(){
        return online;
    };
    function poll() {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "text",
            error: function(){
                online = false;
                $(document).trigger('status.networkDetection',[false]);
            },
            success: function(){
                online = true;
                $(document).trigger('status.networkDetection',[true]);
            }
        });
    };
};

score 0 · Answer 5 · answered Sep 26 '12 at 17:59

One way to go about it is to send your form using AJAX. Then you'll have a handler that will tell you that it wasn't able to connect to the server and you can save the data and inform the user that the server is not available. It doesn't really matter whether the problem is your internet connection or the server may be down.

score -2 · Answer 6 · answered Sep 26 '12 at 17:59

-2

if (navigator.onLine) {
  alert('online');
} else {
  alert('offline');
}

answered Sep 26 '12 at 17:59

teewuane

5,524
5
37
43

That property is not reliable across browsers http://ejohn.org/blog/offline-events/ – Ruan Mendes Sep 26 '12 at 18:01
@JuanMendes ah, So others can learn of this, I will not delete my down voted answer :) Also, I should have read this part that talks about browser compatibility. https://developer.mozilla.org/en-US/docs/DOM/window.navigator.onLine#Browser_compatibility – teewuane Sep 26 '12 at 18:03
Regardless of the accuracy of the answer, you should always explain your code and why we should use it (often a sentence or two is enough.) – Sam Sep 26 '12 at 18:06

Is there a way to tell the user that there's no internet connection when they press submit?

6 Answers6