Good example on if internet connection exists by using jQuery/AJAX?

Question

Hi,

When I click a button I want to show or keep a hidden button hidden depending on whether the device has an internet connection or not. I have googled some but haven't found any really good example yet, do you know of any?

I want something like

$('#btnPrepareSynch').click(function () {
 checkConnection();
});

function checkConnection()
{
     if(connection exist) {
          $('#btnSync').show("slow");
     } else {
          $('#btnSync').hide();
     }
}

Possible?

Thanks in advance

Edit, it's ok to check if it has a connection by sending a ping to google.com or something

edit2: with

$.ajax({
    url: "http://www.google.com",
    cache: false,
    success: $('#btnSaveBottom').show("slow")
});

the button is shown even if I don't have any internet connection. If I change it to .hide() the button remains hidden. How do I add a fail statement here?

Answer 1

The "error" callback is run upon any non-200 response from the server (or timeout.)

$.ajax({
    url: "http://yourdomain.com/am_i_up.html",
    cache: false,
    success: function(html) { 
        $('#btnSaveBottom').show("slow");
        return true;
    }
    error: function(xhr, textStatus, thrownError){
        alert(textStatus); //this will be 'timeout'
    } 
});