Question

Hi I have a huge problem that’s been bugging me for quite a while, most of the times I have been able to avoid it but now there is no other way. Below is a function that when executed sends a post request for every checked boxes. I need it to wait until the $.each has finished to refresh the page. I have performed tests with location.reload in the callback of each and outside of each. Out of 10 selected boxes only 7-8 are processed with the reload in the callback of $.each and 3-4 if moved after $.each (still inside the .click). I need it to wait, somehow, for $.each to finish and then refresh the page. Is there a way to do that?

$('button.moveToTable').click(function(event){
            $("input:checked").each(function(){
                $.post('/table/move-to-table',
                {orderID: $(this).val(),
                    tableID: $('#moveToTableID').val()
                },
                function(data){
                    location.reload();
                });
            });
            //location.reload();
        });

Answer 1

One simple way is to store the number of elements in a global scope and subtract them. When the last element finishes the request it will reload. Note that if some request return an error this will fail, you have to handle the error event as well subtracting the window.Remaining. Two or more clicks might corrupt this method as well.

window.Remaining = 0;
$('button.moveToTable').click(function(event){
    window.Remaining = $("input:checked").length;
    $("input:checked").each(function(){
        $.post('/table/move-to-table',
        {orderID: $(this).val(),
            tableID: $('#moveToTableID').val()
        },
        function(data){
            --window.Remaining;
            if (window.Remaining == 0)
                window.location.reload();
        });
    });
    //location.reload();
});