Question

I am executing async AJAX requests which are being wrapped into function. Where $.ajax is Deferred object and I can use .promise properly (check: Initially Loaded) then I won’t be able to do the same with ‘Now really loaded’ which will be executed before ajax finish loading.

function WSCall(method, data, callback, type, async, bg) {
    // .. code ..
    var promise = $.ajax({
        'url': useSampleData ? useSampleData || null,
        //'async': false,
        'type': 'POST',
        'dataType': (type == null) ? 'json' : type,
        'data': data,
        'beforeSend': bg ? null : LoadingBegin,
        'complete': bg ? null : LoadingEnd,
        'success': callback,
        'error' : bg ? null : function(jqXHR, textStatus, errorThrown) { networkError = 1; }
    });

    promise.done(function(){ console.log('Initially loaded') });
}

function aSyncEvent() { 
    WSCall(
        'status',
        {},
        function (data) {
            if (data.error) { 
                console.log('Error occured'); return ShowDialogAlert(data.error); }
            if (data.statusResult) {
                var parts = data.statusResult.split('-');
                if (parts[1] === '0') { 
                    sId = parts[0]; 
                    console.log('Wow its loaded!'); 
                    return true; 
                }               
            }
        }
    )   
}

$.when( aSyncEvent() ).then( function () { console.log('now really loaded')});

Initially loaded and Wow its loaded will appear properly AFTER ajax has been executed in proper order however ‘now really loaded’ will appear before ajax finishes executing.

I beg for help regarding this matter.

Thanks
Mike

Answer 1

Have you tried returning your deferred?

function WSCall(method, data, callback, type, async, bg) {
    // .. code ..
    return promise.done(function(){ console.log('Initially loaded') });
}

and

function aSyncEvent() { 
    return WSCall(
        // .. code ..
    );
}