Eu tenho uma página na qual tenho um número variável de chamadas AJAX para fazer, que são acionadas em um evento comum. As chamadas AJAX são para atualizar os campos relacionados em um banco de dados SQL. Depois que todas as chamadas estiverem concluídas, desejo atualizar a página para que ela agora reflita as alterações feitas.

Eu usei a seguinte pergunta / resposta aqui para chegar tão longe ..jQuery quando cada um for concluído, função de disparo

Aqui esta o meu codigo ate agora:

var team_update = function(e) {
    var $items = $('.sortable-items');
    var XHRs = [];

    $items.each(function(){
        var team_id = $( this ).attr("id");
        var data =  {
            tid: team_id,
            users: $('#' + team_id).sortable('toArray')
            };

        XHRs.push(
            $.ajax({ 
                type: "POST", 
                url: "update.php", 
                data: data, 
                complete: function(data){
                } 
            })  
        );

    });

    $.when(XHRs).then(function(){
        console.log('Refreshing Screen');
        $('#content-wrapper').load( 'index.php' );
    });

}

O que eu esperava que acontecesse, é que o$('#content-wrapper').load( 'index.php' ); dispararia assim que todos os meus pedidos de ajax () tivessem sido concluídos. O que parece estar acontecendo, no entanto, é que o retorno de chamada é acionado depois que todas as solicitações são enviadas, não necessariamente depois de concluídas, e, por vezes, a atualização da minha página ainda contém dados 'antigos'.

O gráfico abaixo mostra meu carregamento inicial da página na parte superior, que pode ser ignorado. São as próximas 4 entradas que mostram o problema. Existem 3 solicitações POST que são minhas 3 chamadas ajax para atualizar o banco de dados e o GET final, que é a atualização da página. A atualização de página GET é acionada após o envio das 3 chamadas ajax, mas não espera a última chamada ajax ser concluída antes de ser acionada. Como conseqüência, ele obtém os dados antigos conforme são concluídos antes que a chamada ajac anterior termine de atualizar o banco de dados.

O que eu estou fazendo errado aqui?