I am working on an appointment system. I want to update the "appointment requests" table and the "accepted appointments" table simultaneously when the "Confirm" button is clicked on the incoming appointment request. Currently, the "appointment requests" table is updated simultaneously, but I need to refresh the page to update my "accepted appointments" table.
function load_data(query) {
var id = document.getElementById("personel_id").value;
$.ajax({
url: "includes/crm-clients-details-requests-load.php",
method: "POST",
data: {
query: query,
id: id
},
success: function(data) {
$('#result-requests').html(data);
}
});
$.ajax({
url: "includes/crm-clients-details-confirmed-load.php",
method: "POST",
data: {
query: query,
id: id
},
success: function(data) {
$('#result-confirmed').html(data);
}
});
$.ajax({
url: "includes/crm-clients-details-past-load.php",
method: "POST",
data: {
query: query,
id: id
},
success: function(data) {
$('#result-past').html(data);
}
});
};
All ajax structures work alone without any problems, I want the second ajax build to run when the first ajax runs and is successful.
You can try code below
$.ajax({
// options for the first call
}).done(function() {
$.ajax({
// options for the second call
}).done(function () {
// and so on
});
});