title: Using jQuery $.when and $.then to handle multiple ajax requests not returning response text
body: <p>Essentially I want to use jQuery to return data from an XML and JSON feed and <code>console.log</code> the data only when both are successful. </p>
  
  <p>If I comment out <code>getRoomFeed()</code> within the <code>$.whe</code>n it will return the proper <code>responseText</code> object for the XML, however if I leave both of them in there it returns the document object when I <code>console.log(rateData)</code>. Why can't I pull data from both the JSON and XML and get the <code>responseText</code> from both? Why do I get a different result when I use both feeds within the <code>$.when</code>?</p>
  
  <p>See attached codepen and check the console or code below,</p>
  
  <pre><code>function getRoomFeed() {
   return $.ajax({
  type: "GET",
  url: "JSONURLHERE.json",
  dataType: "JSON"
   });
  };
  
   function getRates() {
    return $.ajax({
  type: "GET",
  url: "XMLURLHERE.xml",
  dataType: "XML"
   });
  };
  
  $('#prop__selector').on('change', function() {
    getPropCode = $(this).val();
    $.when(getRoomFeed(), getRates()).then(function(roomData, rateData) {
  console.log(roomData);
  console.log(rateData);
      }); 
   });
  </code></pre>
  
  <p><a href="http://codepen.io/benweiser/pen/gPNVmd/" rel="nofollow">http://codepen.io/benweiser/pen/gPNVmd/</a></p>
  
  <p>I had attached images, but unfortunately I had to remove them because I don't have enough reputation.</p>