Best way to chain multiple dependant AJAX calls where some calls are optional (depending on the result of previous AJAX request)

Best way to chain multiple dependant AJAX calls where some calls are optional (depending on the result of previous AJAX request)

I have 3 dependant select lists - "Component", "Modifer" and "Defect Type". When the user changes the selected "Component" I need to updated the items in the "Modifier" select list and then depending on how many modifiers are returned I may or may not need to update the items in the "Defect Type" select list.

Pseudo code:

1. Display loading panel

2. Make an AJAX call to find all modifiers for the selected component

3.   If the number of modifiers returned from step 2) is greater than 0 then
            Add the returned modifiers to the "Modifer" select list
      Else
            Make an AJAX call to find all defect types for the selected component
            Add the returned defect types to the "Defect Type" select list

4. Hide the loading panel.


I have been able to implement this using the following jQuery code and it works, but it involves having multiple levels of nesting in the done event handlers and it seems untidy and not very maintainable.

Am I doing this the right way or there a better way to do it? I have thought of using deferred's and chaining them using .then but I can't seem to figure out how to deal with the optional AJAX call.

  2.     $("#ComponentCode").change(function (e) {

  4.         // Save the currently selected modifier (so we can re-select it after re-populating the modifier select list)
  5.         var oldModifierCode = $("#ModifierCode").val();

  7.         // Clear the modifier select list
  8.         $("#ModifierCode").empty();

  10.         showLoadingPanel();

  12.         // Begin an AJAX to get all modifiers for the EGI and selected component
  13.         var modifierSearchRequest = $.ajax({
  14.             type: 'POST',
  15.             url: '@Url.Action("ModifierSearch")',
  16.             dataType: "json",
  17.             data: {
  18.                 egi: $("#Egi").val(),
  19.                 componentCode: $("#ComponentCode").val()
  20.             }
  21.         });

  23.         modifierSearchRequest.done(function (modifiers, textStatus, jqXhr) {
  24.             /// <summary>Callback function executed once the modifier search AJAX request has completed</summary>
  25.             /// <param name="modifiers" type="JSON">The JSON formatted list of modifiers returned from the server</param>
  26.             /// <param name="textStatus" type="String">A string describing the status</param>
  27.             /// <param name="jqXhr" type="jqXHR">The jQuery XMLHttpRequest (jqXHR) object</param>

  29.             if (modifiers.length > 0) {
  30.                 // The search returned at least 1 modifier. Fill the modifier select list with the search results

  32.                 fillSelectList($("#ModifierCode"), modifiers, oldModifierCode);
  33.                 hideLoadingPanel();
  34.                 $("#ModifierCode").effect("highlight", { color: "#428bca" }, 2000);

  36.             }
  37.             else {
  38.                 // The search returned no modifiers

  40.                 // Save the currently selected defect type (so we can re-select it after re-populating the defect type select list)
  41.                 var oldDefectTypeCode = $("#DefectTypeCode").val();

  43.                 // Clear the defect type select list
  44.                 $("#DefectTypeCode").empty();

  46.                 // Begin an AJAX to get all defect types for the EGI and selected component
  47.                 var defectTypeSearchRequest = $.ajax({
  48.                     type: 'POST',
  49.                     url: '@Url.Action("DefectTypeSearch")',
  50.                     dataType: "json",
  51.                     data: {
  52.                         egi: $("#Egi").val(),
  53.                         componentCode: $("#ComponentCode").val()
  54.                     }
  55.                 });

  57.                 defectTypeSearchRequest.done(function (defectTypes, textStatus, jqXhr) {

  59.                     fillSelectList($("#DefectTypeCode"), defectTypes, oldDefectTypeCode);
  60.                     hideLoadingPanel();
  61.                     $("#DefectTypeCode").effect("highlight", {}, 2000);

  63.                 });

  65.                 defectTypeSearchRequest.fail(handlejQueryAjaxError);

  67.             }

  69.         });

  71.         modifierSearchRequest.fail(handlejQueryAjaxError);

  73.     })

Thanks
David