check connection function with jquery

Question

I want to check internet connection with a test, with jquery

my js:

/* detect connexion */
function detectConnexionTest() {

  var urlOnline = "/connect";

  jQuery.ajax({
    type: 'POST',
    url: urlOnline,
    success: function(data, textStatus, xhr) {
      console.log(xhr.status);
      detectConnexion("yes");
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log(xhr.status);
      detectConnexion("no");
    }
  });
}

function detectConnexion(value) {
  if (value == "yes") {
    return true;
  } else if (value == "no") {
    return false;
  } else {
    return false;

  }
}

and after, the calling in a angularjs controller :

detectConnexionTest();
if (detectConnexion() === true) {
    $scope.online = "connected";
} else if (detectConnexion() === false) {
    $scope.online = "not connected";
}

html :

<p>are you connected ? : {{online}}</p>

i'm confused about call the testing function detectConnexionTest , and my scope show me always "not connected" even if i'm connected and get "200" status... what's wrong ?

Answer 1

1. You call detectConnexionTest() which begins an AJAX request and returns immediately
2. You call detectConnexion() with no parameter immediatly afterwards, which is guaranteed to return false even if your AJAX request had completed
3. When your AJAX call does return, you call detectConnexion() and do pass a value and it will return true or false, but you don't store that return value.
4. Since you're using jQuery.ajax(), angular does not know when your call returns so even if you did update a value on your scope properly your page would not update until angular went through another digest cycle.

What you should probably do is use $http and set the scope value when the call returns:

function TestCtrl($scope, $http) {
  function detectConnexion() {
    $http.post("/connect").success(function(data, status, headers, config) {
      $scope.online = "connected";
    }).error(function(data, status, headers, config) {
      $scope.online = "not connected";
    }
  }

  detectConnexion();
}

Answer 2

You're getting it wrong, try to understand how AJAX works, this is one way to do it pretty similar to what you've got there:

Change the detectConnexion function to this:

function detectConnexion(value) {
  if (value == "yes") {
    connected = true;
  } else if (value == "no") {
    connected = false;
  } else {
    connected = false;
  }
}

And change the code in the angular controller to this:

detectConnexionTest();
if (connected === true) {
    $scope.online = "connected";
} else if (connected === false) {
    $scope.online = "not connected";
}

Answer 3

Try the following code, it's cleaned a bit.

function detectConnexionTest() {
  var urlOnline = "/connect";

  jQuery.ajax({
    type: 'GET',
    url: urlOnline,
    success: function(data, textStatus, xhr) {
      detectConnexion(true);
    },
    error: function(xhr, textStatus, errorThrown) {
      detectConnexion(false);
    }
  });
}

function detectConnexion(b) {
    $scope.online = b ? "connected" : "not connected";
}

detectConnexionTest();

Answer 4

By far the easiest way to do this is with the navigator.onLine property. You could implement the javascript to run when a button is pressed. You can put it into a simple if, else statement. Read more here:

http://www.w3schools.com/jsref/prop_nav_online.asp

Example:

function checkConnection() {
    if (navigator.onLine) {
       // Action
    } else {
       // Action
    }
}