JQuery (форма обновления) - как предварительно заполнить несколько вариантов выбора, а затем заполнить данные записи

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"));   
        }
    });         
}   

Как видите, "populateFormGeneric" срабатывает независимо от того, что происходит с ""populateStates" (я могу даже оставить его пустым, и он все равно срабатывает).

Пожалуйста, помогите.Очень ценится, Эдвард

Answer 1

Я думаю, что проблема может быть в том, что вы return dfd.promise() до того, как функция success() запустит populateStates().

Что произойдет, если вы просто вызовете populateFormGeneric() из функции success() запроса AJAX 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');
        }
    });         
};