开发者

Deferred not working at all with asynchronous Ajax request

开发者 https://www.devze.com 2023-03-12 15:41 出处:网络
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 m

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 + '</op开发者_运维技巧tion>';
            });     
            $("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              
}


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

精彩评论

暂无评论...
验证码 换一张
取 消