ajax variable is undefined only for the first time in cordova

Question

well, this is the problem: the variable day is undefined for the first time that setDates() function works. Then the next time it returns the value that the day variable should have the last time. The variable is defined until to reach in the setDates.php file. Then for some a reason it is undefined for the first time. Php file is nothing important, just a die(variable) function... Please help me.

function controlDates() {

//today = $('#chooseDate').val();
today= document.getElementById('chooseDate').value;
user = localStorage.Username;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        $('#comfirmMess').html(msg);
        if (msg == 'available') {
            $('#comfirmMess').html('');
            $('#ChooseHour').show();
            $('#checkButton').show();
            setDates();
        }
    }
};
xhttp.open("GET", "https://ptyxiaki.000webhostapp.com/controlDates.php?today=" + today + '&user=' + user, true);
xhttp.send();

}


function setDates() {
if ($("input:radio[name='ProgramName']").is(":checked"))
    trainName = $("input[name='ProgramName']:checked").val();
 //today = $('#chooseDate').val();
var dsplit = today.split("/");
// day = new Date(dsplit[0], dsplit[1] - 1, dsplit[2]);
day = new Date(today);
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

day = weekday[day.getDay()];

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        mess=msg;
        msgarr = msg.split(" ");
        startTime = msgarr[0];
        finnishTime = msgarr[1];


    }
};
xhttp.open("GET", "https://ptyxiaki.000webhostapp.com/setDates.php?today="    + day, true);
xhttp.send();




var xhttl = new XMLHttpRequest();
xhttl.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        msg = this.responseText;
        if (msg == 'Please enter a valid trainer') {
            $('#comfirmMess').html(msg);
            $('#ChooseHour').hide();
            $('#checkButton').hide();
        }
        res = [];
        DisHours = msg.split(" ");
        for (i = 0; i < DisHours.length - 1; i++) {
            res[i] = DisHours[i].split(":");
            DisHours[i] = res[i][0];
        }
    }
}

xhttl.open("GET", "https://ptyxiaki.000webhostapp.com/showAvailDates.php?date=" + today + '&trainName=' + trainName, true);
xhttl.send();


}

I don't see declaration of `day` – Muhammad Usman Nov 06 '17 at 23:29 — Muhammad Usman, Nov 06 '17 at 23:29
possibly.. this (day) should be out of the function body – Muhammad Usman Nov 06 '17 at 23:33 — Muhammad Usman, Nov 06 '17 at 23:33

score 1 · Answer 1 · answered Nov 06 '17 at 23:41

The problem is that AJAX requests are asyncrononous; your call to setDates isn't waiting on your response to your call to controlDates. As such, the flow of your logic is like this:

You make a request to controlDates
The request has been successfully sent to controlDates
You make a request to setDates with an undefined day
The request has been successfully sent to setDates
At some random point, the response from the call to controlDates comes back
(presumably successfully), and day gets defined.

As such, your first call to setDates is still waiting for day to be defined by the success response from the call to controlDates.

To get around this, you're looking to make use of a promise and say that 'something is going to come back from call A, wait until it gets here to make call B'.

To make use of a promise with a raw XMLHttpRequest, you can use the following (credited to SomeKittens):

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Hope this helps! :)

ajax variable is undefined only for the first time in cordova

1 Answers1