CODEWITHSUNDEEP
jqueryajaxcallback
JSON
JSON

Reputation: 1623

How to handle ajax callback in another ajax's beforeSend event asynchronously?

I m trying to check the internet connection before the user firs the ajax function using beforeSend event and callback (I don't want to use sync ajax). I believe that I missing something here as the function that pings keeps returning undefined value regardless the callback.

My callback function is

function checkNetConnection(u, s, e) {
    var c=0
    $.ajax({
        success: s(),
        error: e,
        url: u,
        type: 'Get',
    });
}

so I created a snippet to show two ajax calls, one of them is just a test and the second one to implement the callback. What am I doing wrong here so the call back does not return true in the beforeSend event?

function testcall() {
  $.ajax({
    beforeSend: function(jqXHR) {},
    url: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
    type: "Get",
    success: function(res) {
      console.log('jquery.min.js call ok!')
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("jquery.min.js call Failed");
    }
  });
};

function checkNetConnection(u, s, e) {
  $.ajax({
    success: s,
    error: e,
    url: u,
    type: 'Get',
  });
}

function callthis() {
  $.ajax({
    beforeSend: function(jqXHR) {
      if (checkNetConnection("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
          function() {
            return true;
          },
          function() {
            return false;
          }
        )) {
        console.log("jquery.min.js call ok");
      } else {
        console.log("jquery.min.js call Failed");
        jqXHR.abort();
      };

    },
    url: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
    type: "Get",

    success: function(res) {
      console.log('jquery.min.js call ok!')
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log("jquery.min.js call Failed");
    }
  });
};
$("#bt1").click(function() {
  testcall();
});

$("#bt2").click(function() {
  callthis();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="bt1" type="button" value="Test call (Connection Not tested)" /> <br/> <br/>

<input id="bt2" type="button" value="Function call (Connection tested) " />

Upvotes: 0

Views: 339

Answers (1)

l.varga
l.varga

Reputation: 871

beforeSend is a synchronous function, ajax is not. You are trying to pause the execution of a function based on an asynchronous function. You cannot do that as the execution of the checkNetConnection will not block the beforeSend until it gets a result, it will start execute the Ajax call that checks net connection and then go on to executing the Ajax for jQuery library before the net connection ajax will trigger a callback.

Furthermore, why would you even check for net connectivity? The user did arrive on your page after all? If he loses the connection, you will get an error anyway, so you can handle error via the ajax error callback.

Upvotes: 1

Related Questions