My JQUERY function isn't working properly

Question

Hello !

i have a Jquery Function wich i use to refresh a DIV after doing some updates

First you click on the Icon wich calls the AJAX functions.

It first update an SQL DataTable then switch the icon's Color. Then i reload the DIV wich contains the datas from the updated table. The fact it's the reloading seems to not work properly, sometime it works sometimes it don't, may it be a probleme with the delay?

i give you the Code Below (personnal work, no sensitive datas)

function booking_game(idGame, idUser, plaftorm, id, color) {

if(id.classList.contains('text-' + color)){
$.ajax({
type: "POST",
url: "include/cancelBook.query.php",
data: { idGame: idGame, idUser: idUser, plaftorm:plaftorm }
});
}
else{
$.ajax({
type: "POST",
url: "include/book.query.php",
data: { idGame: idGame, idUser: idUser, plaftorm:plaftorm }
});
}

changeColor(id,color);

$.ajax({
type: "GET",
url: "include/listBooking.php",
data: { idGame: idGame },
success: function(response) {
$(idGame).load(response);
}
});
}

thanks a lot

Answer 1

When you say it doesn't work, do you mean it sometimes doesn't get updated correctly?

If yes, then it's definitely because of the asynchronous nature of requests.

Looking at your if-else statement, I suggest you control the variables instead of having two different ajax request. Then put your "reloading" ajax request inside the success property of the initial call. That way, you'll ensure the data has been updated.

Answer 2

Yeah

Data get updated but screen doesn't

I'll try then i come back to you thanks