비동기식 Ajax 요청으로 전혀 작동하지 않는다.

Question

Ajax 비동기 요청으로 채워지는 HTML 목록이 여러 개있다. 모든 요청이 완료되면 (그 중 많은 수가) 고객 레코드에 해당하는 목록 항목을 선택하여 양식을 채워야합니다.

이 작업을 수행하기 위해 지연을 사용하려하지만이 기능은 목록이 채워지기 오래 전에 종료됩니다. 어떤 아이디어?

$.when(
    $.ajax({ 
     url: "get-status.php", 
     async: true, 
     dataType: 'json', 
     success: function (j) { 
      var options = ''; 
      $.each(j, function(key, value) { 
       options += '<option value="' + key + '">' + value + '</option>'; 
      });  
      $("select#status_id").html(options);     
     } 
    }), 
    $.ajax({ 
     url: "get-groups.php", 
     async: true, 
     dataType: 'json', 
     success: function (j) { 
      var options = ''; 
      $.each(j, function(key, value) { 
       options += '<option value="' + key + '">' + value + '</option>'; 
      });  
      $("select#group_id").html(options);    
     } 
    })      
).then(populateForm('form1',customer_id)); 

실제 애플리케이션 코드 :

<!-- Main function --> 
populateFormBoxSS = function(id){ 
    $.ajax({ 
     url: "get-json-fich_ss.php?id="+id, 
     async: false, 
     dataType: 'json', 
     success: function (j) {   
      // Populate drop-downs    
      $.when(populateEstadosTest('box-estado_id')).then(populateFormGeneric(j, "box")); 
     } 
    });   
} 
<!-- Generic Form Population --> 
populateFormGeneric = function (j, target) { 
    $.each(j, function(key, value) { 
     switch ($('#'+target+'-'+key).attr('type')) { 
      case 'checkbox': 
       if(value==1) { 
        $('#'+target+'-'+key).attr('checked', true); 
       } 
       break;      
      default: 
       $('#'+target+'-'+key).val(value); 
       break;     
     }           
    });  
    return function(){ 
     // Do nothing 
    } 
} 
<!-- Dropdown list population --> 
populateEstadosTest = function(field){ 
    var dfd = new $.Deferred();  
    $.ajax({ 
     url: "get-json-esta.php", 
     async: true, 
     dataType: 'json', 
     success: function (j) { 
       var options = ''; 
       $.each(j, function(key, value) { 
        options += '<option value="' + key + '">' + value + '</option>'; 
       });  
       $("select#"+field).html(options); 
       // Resolve Deferred 
       dfd.resolve();    
     } 
    }); 
    return dfd.promise(); // Returns a promise    
} 

Answer 1

합니까 populateForm ('Form1이') 함수를 반환? Deferred. 다음과 같은 콜백 함수를 기대합니다. 그처럼 :

var populateForm = function (j, target) { 
    return function() { 
     $.each(j, function(key, value) { 
      switch ($('#'+target+'-'+key).attr('type')) { 
       case 'checkbox': 
        if(value==1) { 
         $('#'+target+'-'+key).attr('checked', true); 
        } 
        break;      
       default: 
        $('#'+target+'-'+key).val(value); 
        break;     
      }           
     }); 
    }  
} 

$.when(
    $.ajax({ 
     url: "get-status.php", 
     async: true, 
     dataType: 'json', 
     success: function (j) { 
      var options = ''; 
      $.each(j, function(key, value) { 
       options += '<option value="' + key + '">' + value + '</option>'; 
      });  
      $("select#status_id").html(options);     
     } 
    }), 
    $.ajax({ 
     url: "get-groups.php", 
     async: true, 
     dataType: 'json', 
     success: function (j) { 
      var options = ''; 
      $.each(j, function(key, value) { 
       options += '<option value="' + key + '">' + value + '</option>'; 
      });  
      $("select#group_id").html(options);    
     } 
    })      
).then(populateForm('form1',customer_id));