jQuery when each is completed, trigger function

Question

how do start a function like redirecting to a new page when .each is done looping my elements? this is my current code:

$(\'#tabCurrentFriends > .dragFrie         


        

Answer 1

AJAX happens asynchronously, so you'll have to try something like this:

var total = $('#tabCurrentFriends > .dragFriend').length;
var completed = 0;

$('#tabCurrentFriends > .dragFriend').each(function(){ 
    var friendId = $(this).data('rowid');
        $.ajax({
            type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid,
            complete: function(data){
              completed++;

              if (completed == total) {
                // All have been loaded.
              }
        }
    });
});

Answer 2

You can use $.when()/$.then() to redirect your users after all the AJAX requests are done:

//create array to hold deferred objects
var XHRs = [];
$('#tabCurrentFriends > .dragFriend').each(function(){  
    var friendId = $(this).data('rowid'); 

    //push a deferred object onto the `XHRs` array
    XHRs.push($.ajax({ 
        type: "POST", url: "../../page/newtab.php", data: "action=new&tabname=" + tabname + "&bid=" + brugerid + "&fid=" + friendid, 
        complete: function(data){ 
        } 
    })); 
}); 

//run a function when all deferred objects resolve
$.when(XHRs).then(function (){
    window.location = 'http://stackoverflow.com/';
});

Edit - to use when with an array, apply must be used:

$.when.apply(null, XHRs).then(function () {
    window.location = 'http://stackoverflow.com/';
});

jQuery AJAX requests create deffered objects that resolve when their complete function fires. This code stores those deffered objects in an array and when they all resolved the function within .then() is run.

Docs:

• $.when(): http://api.jquery.com/jquery.when
• $.then(): http://api.jquery.com/deferred.then/