How to send Consecutive Ajax Post using .each() loop to save the grid State

Question

I have this Script, It allows me to perform ajax post, it works fine, but the problem is, sometimes it only saves on grid data(state)...Any code, help is much appreciated

window.onload = function () {
    GRIDSETTINGS = new SFCgrid();
};
$("#save").click(function () {
    GRIDSETTINGS.save("AGENT")
});
$("#load").click(function () {
    GRIDSETTINGS.save_multiple_grid();
});
//*****************Grid Column Settings**************//

var SFCgrid = function () { };

SFCgrid.prototype = function () {
    var save = function (grid_nm) {
        var grid = $("#" + grid_nm).data("kendoGrid");
        //this gets the datasource properties
        var dataSource = grid.dataSource;

        var page_nm, grid_nm;
        page_nm = $('#page_nm').val();
        grid_nm = $('#grid_nm').val();

        //this gets the datasource properties such as filters, columns including width, paging, sorting and grouping into serialized json
        //add {} on state.. See below
        var state = grid.columns;
        //page: dataSource.page(),          //uncomment this if you want to save page 
        //pageSize: dataSource.pageSize(),  //uncomment this if you want to save pagesize
        //sort: dataSource.sort(),          //uncomment this if you want to save sorting
        //filter: dataSource.filter(),      //uncomment this if you want to save filters which applies filtered data 
        //group: dataSource.group()         //uncomment this if you want to save grouping which outputs grouped data 

        //this pass the data in the session and save it in the controller
        $.ajax({
            url: "/Home/Save",
            data: {
                data: JSON.stringify(state), grid_nm: grid_nm, page_nm: page_nm      //multiple data being passed here
            }

        });
    },
        save_multiple_grid = function () {      //save all grid settings in one ajax call in multiple grid using the each loop
            var i = 0;
            $("[data-role='grid']").each(function () {
                var grid_nm = $(this).attr('id');
                var grid = $("#" + grid_nm).data("kendoGrid");
                //this gets the datasource properties
                var dataSource = grid.dataSource;

                var page_nm, grid_nm;
                page_nm = $('#page_nm').val();


                //this gets the datasource properties such as filters, columns including width, paging, sorting and grouping into serialized json
                //add {} on state.. See below
                var state = grid.columns;

                //push a deferred object onto the `XHRs` array //tricky part here still unsure how wil this work
               $.ajax({
                    url: "/Home/Save",
                    data: {
                        data: JSON.stringify(state), grid_nm: grid_nm, page_nm: page_nm      //multiple data being passed here
                    },
                    success: function (response) {
                        if (response != '') {
                            alert(response);
                        };
                    }
               });
               i++;

            });

        };



    return {

        save: save,
        save_multiple_grid:save_multiple_grid
    };


}();

how can i be sure that every grid settings is saved thanks

Answer 1

You can use jQuery.when to wait for multiple ajax calls to complete:

$.when( $.ajax( { url: "/page1" } ), $.ajax( { url: "/page2.php" } ) )
 .then( myFunc, myFailure );

If you do not know how many ajax requests there will be you can push them in an array and then invoke jQuery.when via the apply method:

var requests = [];
requests.push($.ajax({ url: "page1" });
requests.push($.ajax({ url: "page2" });
requests.push($.ajax({ url: "page3" });

$.when.apply(null, requests).then(success, failure);