AJAX keep showing wrong data from array

Question

I have a loop that calls multiples AJAX to find out if there's any booking in the database or not. JS will pass the data from an array to AJAX and find it out in database through SQL query.

However, the data returned from the AJAX is correct, and if it's there in database, i want to to show the data returned from AJAX and the current value of array in current loop, but still the data that i show from the array is the last index of array.

javascript :

function getButtonInfo() {
    var jam = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
    var lap = ['Lapangan A','Lapangan B','Lapangan Batminton'];
    var lapId = ['lapA','lapB','lapBat'];
    for (var j = 0; j < lap.length; j++){
      for (var i = 0;i < jam.length; i++){
        var lapIdFix = jam[i]+lapId[j];
        var lapId2 = jam[i]+lap[j];
        var lap1 = lap[j];
        if(jam[i] < 10){
          var jamFix = '0'+jam[i]+':00:00'; 
        }else{
          var jamFix = jam[i]+':00:00';
        }

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
      }
    }
    return false;
    }

PHP File:

<?php

    ob_start();
    $error=""; // Variable To Store Error Message
    $connection = mysqli_connect(/*credential*/);
    $tgl = $_POST['date'];
    $time = $_POST['time'];
    $lap = $_POST['lapangan'];

    //Query
    $query = mysqli_query($connection, "SELECT * FROM lapangan_book WHERE tanggal='$tgl' and jam='$time' and lapangan='$lap'");
    $rows = mysqli_num_rows($query);
    $data = mysqli_fetch_array($query);

    if($rows > 0){
        echo $data['lapangan'];
    }else{
        echo "0";
    }

?>

The output should be

Lapangan A
22lapA
22Lapangan A

But keep showing

Lapangan A
22lapBat
22Lapangan Batminton

Answer 1

Yes, this is happening because of the Asyncroniouse behavior of ajax. There is two tricks you have to send asynchronous request by async: false or you have to call the recursive function after success response from ajax request.

Trick 1- Pass option aysnc: false in ajax request, but some browser will throws warning in synchronous request of ajax

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          async:false,
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
      }

Trick 2: Recursive function, this is most accurate way of calling

function getButtonInfo() {
    var jam = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
    var lap = ['Lapangan A','Lapangan B','Lapangan Batminton'];
    var lapId = ['lapA','lapB','lapBat'];
    var i=0;
    var j=0;
    var ajaxCall= function(){
        var lapIdFix = jam[i]+lapId[j];
        var lapId2 = jam[i]+lap[j];
        var lap1 = lap[j];
        if(jam[i] < 10){
          var jamFix = '0'+jam[i]+':00:00'; 
        }else{
          var jamFix = jam[i]+':00:00';
        }

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          async:false,
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
            var recursiveCall=true;
            i=i+1;
            if(i>=jam.length){
                j=j+1;
                if(j>=lap.length) recursiveCall= false;
                else i=0;
            }
            if(recursiveCall===true)
            {
                 ajaxCall();
            }
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
    }
    ajaxCall();
    return false;
}

I have written code for your understanding might be your have to made come modification in this code