Group multiple AJAX success calls into one

Question

I'm updating records in my database using a checkbox in a table. I'm trying to offer 1 Alert after ALL the updates went through, rather than alerting for each individual success call

  $('#update').click(function () {
$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  $.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
    type: 'PUT',
    data: {field_1: 'Closed'},
    success: function (response) {
        alert('updated!');
    }
  });

Is this possible?

Keep a count of how many requests were made and how many "successes" you've had. Once they are equal then do the alert. There are several ways to implement this mechanic. — PeterVC, Mar 14 '15 at 20:27

score 1 · Accepted Answer · answered Mar 14 '15 at 20:33

Count your successful calls and compare with the total number of calls.

 $('#update').click(function () {

var calls=$('#view_26 tbody input[type=checkbox]:checked').length;
var success=0;

$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  $.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
    type: 'PUT',
    data: {field_1: 'Closed'},
    success: function (response) {
success+=1;
if(success==calls) alert('updated!');
        }

  });

Maybe you should also catch unsuccessful calls.

score 0 · Answer 2 · answered Mar 14 '15 at 20:48

Can you build and PUT the entire JSON array instead of one row at a time? This, of course, would require modifying your web service to get the record id from the JSON instead of the url. It's a better practice to limit your calls in this manner.

$('#update').click(function () {

var myJSON=[];
$('#view_26 tbody input[type=checkbox]:checked').each(function() {
    var id = $(this).closest('tr').attr('id');
  myJSON.push({ID:id,field_1:'Closed'});
});
//end of each


$.ajax({
    url: 'https://api.knackhq.com/v1/objects/object_1/records/',
    type: 'PUT',
    data: myJSON,
    success: function (response) {
        alert('updated!');
    }

  });

I would have taken this route however the service doesn't allow for batch updating like that -- they need to be individual calls. Thanks for the feedback though. — Nicolas Galluzzo, Mar 14 '15 at 23:00

score 0 · Answer 3 · answered Mar 14 '15 at 20:56

All you need to do is to compare the length of checkboxes against the index to see if they are equal, like below.

$('#update').click(function () {
    var checkboxes = $('#view_26 tbody input[type=checkbox]:checked'),
        len = checkboxes.length;

    checkboxes.each(function(i) {
        var id = $(this).closest('tr').attr('id');
        $.ajax({
            url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
            type: 'PUT',
            data: {field_1: 'Closed'},
            success: function (response) {
                if (i === len - 1 ) {
                    alert('updated!');
                }
            }
        });
    })
});

score 0 · Answer 4 · answered Mar 14 '15 at 21:11

Try

$('#update').click(function () {
  var elem = $('#view_26 tbody tr input[type=checkbox]:checked');
  var res = $.map(elem, function(el, i) {
    var id = $(el).closest('tr').attr('id');
    console.log(id);
    return $.ajax({
      url: 'https://api.knackhq.com/v1/objects/object_1/records/' + id,
      type: 'PUT',
      data: {field_1: 'Closed'}
    });
  });
  $.when.apply($, res)
  .then(function() {
      alert("updated!");
  }, function(jqxhr, textStatus, errorThrown) {
      alert(textStatus +" "+ jqxhr.status +" "+ errorThrown);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="update">update</button>
<table id="view_26">
  <tbody>
    <tr id="0">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
        <tr id="1">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
        <tr id="2">
      <td>
      <input type="checkbox" value="">
        </td>
    </tr>
    </tbody>
  </table>

This one's a bit more advanced than I can tackle right now but will definitely study it. Thanks for the feedback! — Nicolas Galluzzo, Mar 14 '15 at 23:04
Similar to `js` at OP, utilizing `$.map()` instead of `.each()`; `res` returns an array of `deferred` objects from `$.map()` , with `success`, `error` callbacks passed to `.then()`. See http://stackoverflow.com/questions/5627284/pass-in-an-array-of-deferreds-to-when . You are welcome:) — guest271314, Mar 14 '15 at 23:13

Group multiple AJAX success calls into one

4 Answers4