jQuery Ajax call not processing .done

Question

I have been beating my head against this desk, and I am not sure why javascript/jQuery (1.71) is not completing it's tasks before doing something else.

I am calling a function that is strictly a jQuery Ajax call. The function performs the Ajax portion, but the .done is not being processed before it leaves the function and returns to the original calling function.

If you look through the code, I stripped out non-essential code, but left the call. So I call the processAjax function. As I trace through it, the function is called, the Ajax process is performed, and then it returns to the dups function and the alert ('stopping here') is triggered before the done section is processed.

What's going on?!?

Here is some code:

function dups(){
    $('#dupChecker').val(2);
    if ($('#spDegree').length){
    // do logic here

    }

    else if ($('#meetingID').length){
    // do logic here            
    }

    else {
    // do logic here            
    }

    processAjax(user, actDate, meetID, degree, act);

    alert('stopping here');

    return 0;

};

function processAjax(a,b,c,d,e){

    $.ajax({
        url: "deSubmit_testDups.cfm",
        cache:false,
        method: "POST",
        data: {id:a, aDate:b, meet:c, degree:d, act:e},
        dataType: "html"
    })          

    .done(function( html ) {
        myResult = parseInt($.trim( html ));
        alert ('myresult= '+ myResult);
        if (myResult == 0){
            $('#submitBTN').prop("disabled",false);
            $('#errorMsg').css("visibility","hidden");
            $('#dupChecker').val(1);
        }
        else {
            $('#submitBTN').prop("disabled",true);
            $('#errorMsg').css("visibility","visible");
            $('#dupChecker').val(0);
        }
    })

    .fail(function( jqXHR, textStatus ) {
    alert( "Request failed: " + textStatus );
    });

};

The A in Ajax stands for **asynchronous**. Why do you think you have to provide a callback? — Felix Kling, Jul 08 '15 at 06:33
This is because AJAX is **asynchronous**. The code continues to your `alert` without waiting for the AJAX call to complete. When it eventually completes, *then* it will execute the `done` promise — jasonscript, Jul 08 '15 at 06:34
For Sync AJAX call refer http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re — Madhavi Balan, Jul 08 '15 at 06:39

score -1 · Answer 1 · answered Jul 08 '15 at 06:38

function dups(){
    $('#dupChecker').val(2);
    if ($('#spDegree').length){
    // do logic here

    }

    else if ($('#meetingID').length){
    // do logic here            
    }

    else {
    // do logic here            
    }

    processAjax(user, actDate, meetID, degree, act, function(resp){
         alert('stopping here');
    });



    return 0;

};

function processAjax(a,b,c,d,e, callback){

    $.ajax({
        url: "deSubmit_testDups.cfm",
        cache:false,
        method: "POST",
        data: {id:a, aDate:b, meet:c, degree:d, act:e},
        dataType: "html"
    })          

    .done(function( html ) {
        myResult = parseInt($.trim( html ));
        alert ('myresult= '+ myResult);
        if (myResult == 0){
            $('#submitBTN').prop("disabled",false);
            $('#errorMsg').css("visibility","hidden");
            $('#dupChecker').val(1);
        }
        else {
            $('#submitBTN').prop("disabled",true);
            $('#errorMsg').css("visibility","visible");
            $('#dupChecker').val(0);
        }
        callback();
    })

    .fail(function( jqXHR, textStatus ) {
        alert( "Request failed: " + textStatus );
        callback();
    });

};

Hope this helps you. You can use a callback to make it synchronous. You can also pass the ajax response to the callback.

jQuery Ajax call not processing .done

1 Answers1

Linked