Assigning $.ajax to variables and passing to $.when

Question

What i'm trying to achieve, is to make to AJAX requests, and when both are done update DOM with responses. The code goes as follows:

  var prefix = container.data("lang");

  var typeList = $.ajax({
    url: "/" + prefix + "/camps/list/",
    data: {
      url: hashLink
    },
    type: "POST"
  });

  var typeData = $.ajax({
    url: "/" + prefix + "/camps/type",
    data: {
      url: hashLink
    },
    type: "POST",
    dataType: "JSON"
  });

  $.when(typeList, typeData).done(function(list, data) {
    console.log("we're done");
    //do something
  });

The problem goes as follows - i don't get any console logs at all. What am i doing wrong?

Answer 1

It turns out, error-checking with fail method is a very nice idea with jQuery async calls. So, reworking my deferred like this:

$.when(typeList, typeData)
   .done(function(list, data) {
      console.log("we're done");
      //do something
   }).fail(function(list, data){
      console.log("Houston, we have a problem!");  
   });

Saved me a lot of trouble, and provided me with some error-handling to boot. Since we receive statusText as a parameter to our callback functions it is quite easy to get what's wrong.