Call a function after each loop with ajax calls

Question

I have a loop where I'm making an ajax post. I want to execute the function "doSomething()" only after my loop (and the ajax posts inside each loop) are complete.

I'm thinking this is called a promise, but I'm just getting into jQuery after doing server side forever...

 selectedRows.each(function(e) {
            var dataforpost = { groupId: selectedGroup.Id, 
            userName: userName, displayName: displayName };

            $.ajax({
                url: '@Url.Action("AddMemberToGroup")',
                type: "POST",
                data: dataforpost,
                success: function(data) {}
            });
        });
        
  // now when that loop is done, do something
  doSomething();

I would use a promise and the "then" method to do something like this: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — chevybow
– chevybow, Commented Apr 27, 2018 at 20:58

Sam Battat · Accepted Answer · 2018-04-27 21:07:13Z

1

You can use $.when:

$.when(selectedRows.each(function(e) {
  var dataforpost = { groupId: selectedGroup.Id, 
  userName: userName, displayName: displayName };

  $.ajax({
    url: '@Url.Action("AddMemberToGroup")',
    type: "POST",
    data: dataforpost,
    success: function(data) {}
  });
})).then(function() {
  // now when that loop is done, do something
  doSomething();
});

OR you can keep track of the last loop and trigger a done function call:

selectedRows.each(function(i, e) {
  var dataforpost = { groupId: selectedGroup.Id, 
  userName: userName, displayName: displayName };

  $.ajax({
    url: '@Url.Action("AddMemberToGroup")',
    type: "POST",
    data: dataforpost,
    success: function(data) {},
    done: function() {
      if (i == selectedRows.length - 1) {
        // now when that loop is done, do something
        doSomething();
      }
    }
  });
});

answered Apr 27, 2018 at 21:07

Sam Battat

5,7651 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ScottG Over a year ago

Thanks Sam! I couldn't get the first option to run, but I did get the second one to work with a minor edit. I moved the selectedRows.length check to the success function. I couldn't get done: to execute.

ZloyPotroh · Accepted Answer · 2018-04-28 14:14:48Z

0

Perharps helps:

  selectedRows.each(function(index, elem) {
        var dataforpost = { groupId: selectedGroup.Id, 
        userName: userName, displayName: displayName };

        var jqxhr = $.ajax({
            url: '@Url.Action("AddMemberToGroup")',
            type: "POST",
            data: dataforpost,
            success: function(data) {}
        });
        jqxhr.then(function() {
          console.log( index );
          if ((index+1) >= selectedRows.length){
             console.log('last');
             // now when that loop is done, do something
             doSomething();
          }
        });
    });

edited Apr 28, 2018 at 14:14

answered Apr 27, 2018 at 21:08

ZloyPotroh

3777 silver badges21 bronze badges

Collectives™ on Stack Overflow

Call a function after each loop with ajax calls

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related