Using .then() in jQuery to make back to back AJAX calls

Question

I'm trying to learn promises and have run into the following problem. Using the TMDB api I want to make a simple page to retrieve a movie's info. The TMDB site states to first make a call to get the movie's id then make a second call once you have the id to retrieve the movie's info. So I have to make to AJAX calls one after the other. I have this so far:

$oForm.on("submit", function(e) {
  e.preventDefault();
  $('#poster').html('<center><img src="img/loading.gif" alt="loading..."></center>'); //gif while poster loads.


  // ========= Function to Retrieve Movie Info w/Movie ID from AJAX1 call  ====================== //
  var retrieveInfo = function(id) {
    var sQueryMovieInfoUrl = "https://api.themoviedb.org/3/movie/" + iTmdbId + "?api_key=" + api_key; //Query string to retrieve Movie Info
    var settingsAjax2 = {
      "async": true,
      "crossDomain": true,
      "url": sQueryMovieInfoUrl,
      "method": "GET",
      "headers": {},
      "data": "{}"
    }

    $.ajax(settingsAjax2) // Second AJAX call for the actual Movie info we want
      .done(function(oInfo) {
        console.log("Inside retrieveInfo. Here is Movie Title.  " + oInfo.title);
        return oInfo;
      }) //end .done

  }; // End retrieveInfo
  // ==================== End retriveInfo Function Expression====================== //

  // ========================================================================================================
  // ======================== Main Body of JavaScript =======================================================        
  // ========================================================================================================
  //  Begin the two AJAX calls needed to first retrieve Movie ID and then retrieve Movie Info                         
  var oData, iTmdbId = 0;
  var sTmdbQuery = $("form").serialize();
  var api_key = "123456789";
  var sQueryMovieIdUrl = "https://api.themoviedb.org/3/search/movie?api_key=123456789&" + sTmdbQuery; // Query string to retrieve movie id

  var settingsAjax1 = {
    "async": true,
    "crossDomain": true,
    "url": sQueryMovieIdUrl,
    "method": "GET",
    "headers": {},
    "data": "{}"
  }
  // End Variable Declarations

  $.ajax(settingsAjax1)
    .done(function(idResponse) {
      console.log(idResponse);
      if (idResponse.total_results > 0) { //Check if any results from search
        iTmdbId = idResponse.results[0].id;
        console.log("Here is The Movie Id: " + iTmdbId);
      } else {
        console.log("No Movie Found. Try Alternate Spelling.")
      }

    }) //end .done AJAX1
    .done(function() {
      // AJAX1 has been successful so this function will execute
      // In case of more then one request, both have to be successful
      console.log("inside AJAX2: " + iTmdbId);
      oMovieInfo = retrieveInfo(iTmdbId);
    }) //end 2nd .done 
    .done(function() {
      console.log("Here is the Movie Info Object: " + oMovieInfo);
    }) //end third .done



}) //End on.submit event handler

The problem is that the oMovieInfo object is not returned from the retrieveInfo function. Here is the console output:

Here is The Movie Id: 152  main.js:70:34
inside AJAX2: 152  main.js:80:30
Here is the Movie Info Object: undefined  main.js:84:31
Inside retrieveInfo. Here is Movie Title.  Star Trek: The Motion Picture

The third and fourth lines are out of sync from the way I believed the deferral's should work. If anyone has input into what I am doing wrong I would much appreciate it. The third .done is not waiting for the second .done to complete. I thought in the doc it states you can chain the jQuery .done method.