I have 3 functions which handle data pulled in from AJAX, they update the page after the ajax function is called.
When the AJAX function is called I show a loader, I want to hide the loader after the AJAX has completed and the functions have completed.
How can I use deferred with when and then in jQuery to test once all 3 function are completed.
Here is my AJAX code, this hides the loader on AJAX success at the moment, ideally this would be after the 3 functions have been completed / were successful.
The 3 functions receive data to process and display on the page, they are not AJAX functions.
function setUpStocking() {
$.ajax({
url: url,
cache: false,
beforeSend: function(){
// Show loader
$('.loader').show();
},
success: function(data){
updateMyList(data.gifts);
updateRecievedGift(data.recieved);
updateGiftsOpenedToday(data.opened);
// Hide loader
$('.loader').hide();
}
});
}
The functions are outside the AJAX function:
function updateMyList(gifts) {
// Get data, process it and add it to page
}
function updateRecievedGift(recieved) {
// Get data, process it and add it to page
}
function updateGiftsOpenedToday(opened) {
// Get data, process it and add it to page
}