title: Keeping track and progress of various ajax post requests
body: <p>I'm using jQuery to make various ajax POST requests. I need to keep track of the success or failure of each one of them, along with the overall progress of the complete batch, so that I can update the UI with a progress bar and info about how many requests have succeeded, and how many have failed, out of the total.</p>
  
  <p>Before attempting to implement the feature in my app, I've been playing with some code in jsfiddle as a proof of concept, with no luck so far. This is what I've got:</p>
  
  <pre><code>// an alternative to console.log to see the log in the web page
  var fnLog = function(message) {
      $('#console').append($("&lt;p&gt;" + message + "&lt;/p&gt;"));
  };
  
  // keeping track of how many ajax calls have been finished (successfully or not)
  var count = 0;
  
  // a dummy ajax call that succeeds by default
  var fn = function(shouldFail) {
      return $.get(shouldFail ? '/echo/fail/' : '/echo/json/')
          .done(function() { fnLog("done") })
          .fail(function() { fnLog("FAIL") });
  };
  
  // a set of different asynchronous ajax calls
  var calls = [fn(),fn(),fn(),fn(true),fn(),fn()];
  
  // an attempt to make a collective promise out of all the calls above
  $.when.apply($, calls)
      .done(function() { fnLog("all done") })
      .fail(function() { fnLog("ALL FAIL") })
      .always(function() { fnLog("always") })
      .progress(function(arg) { fnLog("progress" + arg) })
      .then(function() { fnLog("finished") });
  </code></pre>
  
  <p>It's all in this fiddle: <a href="http://jsfiddle.net/mmtbo7v6/1/" rel="nofollow">http://jsfiddle.net/mmtbo7v6/1/</a></p>
  
  <p>What I need is the ability to provide a callback that ought to be called after all promises are resolved (either successfully or not).</p>
  
  <p>When all calls above are set to succeed (by removing the <code>true</code> argument to the fourth <code>fn</code> call in the array) it works fine. The output prints the following:</p>
  
  <pre><code>done
  done
  done
  done
  done
  done
  all done
  always
  finished
  </code></pre>
  
  <p>But when even a single call is set to fail (as it is by default in the jsfiddle), the output is the following:</p>
  
  <pre><code>done
  FAIL
  ALL FAIL
  always
  done
  done
  done
  done
  </code></pre>
  
  <p>So none of the collective promise callbacks (the one generated by the <code>$.when</code> call) is called after all promises are resolved. The final <code>.then</code> is not called at all if a single ajax call fails.</p>
  
  <p>Additionally, I would appreciate some insight on how to keep track of the progress of this batch of ajax calls, to update a progress bar in the UI.</p>