Question

I have multiple HTML lists populated by Ajax async requests. When all those requests are finished (there are many of them), I need to populate the form by selecting the list items that correspond to my customer record.

I’m trying to use deferreds to accomplish this, but the function ends up firing long before the lists are populated. Any ideas?

$.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));  

Actual application code:

<!-- 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

Does populateForm(‘form1’) return a function? Deferred .then expects a callback function e.g. like that:

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