Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

Working with client-side technologies like JavaScript's and Ajax can sometimes be a pain in the butt. One practical example is if you’d like to display a message to the end user 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
                 },
                 error: function (error) {
			//log error
                 }
             });
    calls.push(req);
});

 

Now if you want to display a popup message to end users after all the items are saved then you can simply do something like this after the iteration:

$.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 codes 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!

Technorati Tags: ,,
Posted on Tuesday, January 7, 2014 12:28 AM | Back to top


Comments on this post: ASP.NET MVC, jQuery Ajax and.Each()– Display message after Iteration is complete.

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net