2011-06-10 89 views
0

我有多個由Ajax異步請求填充的HTML列表。當所有這些請求都完成(其中有很多請求)時,我需要通過選擇與我的客戶記錄相對應的列表項來填充表單。推遲與異步Ajax請求完全不工作

我試圖使用deferreds來實現這一點,但函數結束了早在列表填充之前開火。有任何想法嗎?

$.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    
} 

回答

0

不populateForm( 'form1的')返回一個函數?推遲。然後期待回調函數,例如像這樣:

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)); 
+0

事情是,我真的不需要對xhr對象做任何事情。我只是想在執行populateForm()之前確保所有ajax函數都完成。有其他方法嗎?這應該是一個很常見的情況,但我是JQuery的新手,並且我一直無法找到解決方案。 – Edward 2011-06-10 19:17:41

+0

您仍然必須返回回調(回調函數*是一件很常見的事情)。如果你不使用它們,你可以省略參數。 – Daff 2011-06-10 19:32:51

+0

嗨達夫,謝謝你的回答。我嘗試添加一個返回函數,但populateForm函數仍然會在時間之前執行。讓我將實際代碼添加到原始問題中(我原來簡化了它,所以不會那麼長)。 – Edward 2011-06-10 19:47:24