Working with client-side technologies like JavaScript and Ajax can sometimes be a pain in the butt. One practical example is if you’d like to display a message to end users or do something else after all Ajax calls within the loop are completed. In this post I’m going to show how to make it work.
Suppose that we have this JavaScript block below that iterates the table row to get the item ID stored in an input element and then call an action method from the controller through Ajax by passing the itemID as the parameter:
var calls = [];
$("#OrderList > tbody > tr").each(function () {
var itemID = $(this).find("td:eq(0) > input").val()
var req = $.ajax({
type: "POST",
url: "@(Url.Action("AddOrder","Customer"))",
data: { ItemID: itemID },
success: function (data) {
//do something with the return data here
},
error: function (error) {
//log error
}
});
calls.push(req);
});$.when.apply($,calls).then(function(){
$("#divMessage > p").html("Items Saved!");
$("#divMessage").dialog({
modal: true,
width: 400,
height: 280,
buttons: {
Ok: function () {
$(this).dialog("close");
window.location.href = '@Url.Action("OrderList","Customer")';
}
}
});
});The code above uses the jQuery when method. This method provides a way to execute callback functions based on one or more deferred objects that represent asynchronous events. If you noticed on the first block of code it uses an array to store the async objects created using this line “calls.push(req)” and then pass the array to the $.when method. You also noticed that the apply method is used. This is because we need to pass in multiple objects in $.when method, the apply is used to convert the array into parameter list.
That’s it! I hope someone find this post useful!