views:

1415

answers:

9

I have a web application where there are number of Ajax components which refresh them selves every so often inside a page (its a dashboard of sorts).

Now, I want to add functionality to the page so that when there is no Internet connectivity, the current content of the page doesn't change and a message appears on the page saying that the page is offline (currently, as these various gadgets on the page try to refresh themselves and find that there is no connectivity, their old data vanishes).

So, what is the best way to go about this?

+4  A: 
navigator.onLine

That should do what you're asking.

You probably want to check that in whatever code you have that updates the page. Eg:

if (navigator.onLine){
    updatePage()
}else{
    displayOfflineWarning()
}
Dan
+4  A: 

It seems like you've answered your own question. If the gadgets send an asynch request and it times out, don't update them. If enough of them do so, display the "page is offline" message.

Jekke
+1  A: 

See the HTML 5 draft specification. You want navigator.onLine. Not all browsers support it yet. Firefox 3 and Opera 9.5 do.

It sounds as though you are trying to cover up the problem rather than solve it. If a failed request causes your widgets to clear their data, then you should fix your code so that it doesn't attempt to update your widgets unless it receives a response, rather than attempting to figure out whether the request will succeed ahead of time.

Jim
+2  A: 

Hmm actually, now I look into it a bit, it's a bit more complicated than that. Have a read of these links on John Resig's blog and the Mozilla site. The above poster may also have a good point - you're making requests anyway, so you should be able to work out when they fail.. That might be a much more reliable way to go.

Dan
+2  A: 

One way to handle this might be to extend the XmlHTTPRequest object with an explicit timeout method, then use that to determine if you're working in offline mode (that is, for browsers that don't support navigator.onLine). Here's how I implemented Ajax timeouts on one site (a site that uses the Prototype library). After 10 seconds (10,000 milliseconds), it aborts the call and calls the onFailure method.

/**
 * Monitor AJAX requests for timeouts
 * Based on the script here: http://codejanitor.com/wp/2006/03/23/ajax-timeouts-with-prototype/
 *
 * Usage: If an AJAX call takes more than the designated amount of time to return, we call the onFailure
 *        method (if it exists), passing an error code to the function.
 *
 */

var xhr = {
    errorCode: 'timeout',
    callInProgress: function (xmlhttp) {
        switch (xmlhttp.readyState) {
            case 1: case 2: case 3:
                return true;
            // Case 4 and 0
            default:
                return false;
        }
    }
};

// Register global responders that will occur on all AJAX requests
Ajax.Responders.register({
    onCreate: function (request) {
        request.timeoutId = window.setTimeout(function () {
            // If we have hit the timeout and the AJAX request is active, abort it and let the user know
            if (xhr.callInProgress(request.transport)) {
                var parameters = request.options.parameters;
                request.transport.abort();
                // Run the onFailure method if we set one up when creating the AJAX object
                if (request.options.onFailure) {
                    request.options.onFailure(request.transport, xhr.errorCode, parameters);
                }
            }
        },
        // 10 seconds
        10000);
    },
    onComplete: function (request) {
        // Clear the timeout, the request completed ok
        window.clearTimeout(request.timeoutId);
    }
});
Andrew Hedges
This is a way to detect that a connection to the server failed, not that the browser is offline. If that's good enough for you, most libraries have a way to set a handler for all failed Ajax requests. However, navigator.online is the property that tells you that you are connected to the internet.
Juan Mendes
window.navigator.onLine only tells if the browser is set to offline -mode (at least in Firefox). If the Internet connection has been lost, it will still show true, for me at least.
Kai Sellgren
+1  A: 

I think google gears have such functionality, maybe you could check how they did that.

goodwill
+2  A: 

Make a call to a reliable destination, or perhaps a series of calls, ones that should go through and return if the user has an active net connection - even something as simple as a token ping to google, yahoo, and msn, or something like that. If at least one comes back green, you know you're connected.

matt lohkamp
A: 

Thanks for all the responses. I will try to update the question with what I ended up doing.

Vaibhav
A: 

Use the relevant HTML5 API: online/offline status/events.

thSoft