Question

我是JQuery的新手，过去几天我一直在努力解决这个问题。

我正在处理用于更新客户订单的表单。我要做的是首先加载相关的选择数据（订单状态，主管，卖方的组，卖方的清单）然后（并且然后）加载订单信息（并从下拉列表中选择正确的选项）框）。

有很多选择，因此它们必须异步加载，否则页面需要很长时间才能加载（并在此期间冻结）。问题是，表单数据最终在下拉列表之前加载，并且永远不会选择正确的选项。

我尝试使用JQuery deferrends解决它，但表单填充总是在填充选择之前触发。

这是我的代码的简化版本（只有一个选择）：

populateStates = function(field){
    var dfd = new $.Deferred();     
    $.ajax({
        url: "get-json-states.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);
                    // Sort options alphabetically
                    sortListAlpha(field);
                    // Append option: "all"
                    appendListItem(field, '0', 'All');
                    // Select first item
                    selectFistItem(field);  
                    // Resolve Deferred
                    dfd.resolve();              
        }
    }); 
    return dfd.promise(); // Returns a promise              
}
populateFormGeneric = function (j, target) {
    $.each(j, function(key, value) { 
        switch ($('#'+target+'-'+key).attr('type')) {
            case 'select-one': 
                if (value==null) {
                    $('#'+target+'-'+key).attr('value', '')
                } else {
                    $('#'+target+'-'+key).attr('value', value)                              
                }
                break;
        }                                           
    });         
}   
populateCustomer = function(id){
    $.ajax({
        url: "get-json-customer.php?id="+id,
        async: false,
        dataType: 'json',
        success: function (j) {
            $.when(populateStates('state_id')).then(populateFormGeneric(j, "form1"));   
        }
    });         
}

正如你所看到的，无论“populateStates”函数发生了什么，“populateFormGeneric”都会触发（我甚至可以将它留空并且无论如何都会触发）。

请帮忙。非常感激，爱德华

Answer 1

我认为问题可能是因为return dfd.promise()函数在success()中运行之前populateStates()。

如果您只是在populateFormGeneric()的AJAX请求的success()函数内调用populateStates()会怎样？

var populateStates = function(field){
    $.ajax({
        ...
        success: function (j) {
                var options = ''; 
                $.each(j, function(key, value) { 
                    options += '<option value="' + key + '">' + value + '</option>';
                });     
                $("select#"+field).html(options);
                // Sort options alphabetically
                sortListAlpha(field);
                // Append option: "all"
                appendListItem(field, '0', 'All');
                // Select first item
                selectFistItem(field);

                populateFormGeneric(j, 'form1');
        }
    });
},
populateFormGeneric = function (j, target) {
    $.each(j, function(key, value) { 
        ...
    });         
},   
populateCustomer = function(id){
    $.ajax({
        ...
        success: function (j) {
            populateStates('state_id');
        }
    });         
};

JQuery（更新表单） - 如何预先填充多个选择，然后填充记录数据

1 个答案: