I've got this:

```
$("#grid tbody tr").each(function () {
    saveRow(model));
});

getAllRows();
...

```

The method `saveRow` is something like:

```
$.ajax(
{
    type: 'POST',
    contentType: 'application/json',
    url: "myUrl",
    data: JSON.stringify(model),
    success: function (data) {
        whatever();
    }
});

```

What happens is, I want to call the `saveRow` for each grid row that has changed and save it, and when they are all saved, call the `getAllRows` function.

What's currently happening is that when I call the `getAllRows`, not all of the `saveRow`'s have finished causing the data to be returned half changed, half unchanged.

How do I ensure that I call the `getAllRows` only after the `saveRow` has finished for each row in the grid?

**EDIT**

Here's some more detail on the current implementation:

```
// ajax function to save individual row
function saveRow() {
    $.ajax(
    {
        type: 'POST',
        contentType: 'application/json',
        url: "myUrl",
        success: function (data) {
            whatever();
        }
    });
}

// array to store ajax functions called
var requests = [];

// function that iterates through all rows and saves them
$("#grid tbody tr").each(function () {
    // adding the ajax function call to the array
    requests.push(saveRow());
});

...

// supposedly, call getAllRows when all the saveRow ajax calls are done
$.when.apply($, requests).then(function () {
    getAllRows();
});

```

This is not working, the `getAllRows` is called before all the other ones finished