How to resume code in an ajax success after calling another ajax call within the success

Question

I have a function that uses $.ajax. Within the success section, I have 3 function. The first one runs correctly. The second one contains another $.ajax call. The internal $.ajax call works correctly, but the third function in my initial $.ajax call doesn't run. Debugging the whole thing, it doesn't even reach the third function.

Here's a simplified version of the whole thing

function InitialFunction() {


$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: myData,
        url: myUrl,
        async: false,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            FirstFunction();
            SecondFunction();
            ThirdFunction(); // This is never reached
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            // Handle Errors
        }
    });
}

function FirstFunction(){
    // Do stuff
}

function SecondFunction() { 
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: myData,
        url: myUrl,
        async: false,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            console.log("Stuff happened");
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            // Handle Errors
        }
    });
}

function ThirdFunction() {
    // Do more stuff
}

Thanks.

Everything is asynchronous ? First and third functions ? Maybe the `async: false` is blocking the third call ... — Ko2r, Mar 02 '18 at 16:15
@Ko2r No, both $.ajax run with async:false, and the other functions don't have ajax calls or anything else asynch. — Shadowxvii, Mar 02 '18 at 16:19
Is there a good reason for `async: false`? This is usually bad practice. I'm guessing the second ajax call doesn't terminate for some reason; are your success/error methods called? — Jeto, Mar 02 '18 at 16:31

score 0 · Answer 1 · answered Mar 02 '18 at 16:20

Have you tried using deferrals (note the return of the $.ajax in SecondFunction and the .then to call ThirdFunction):

function InitialFunction() {


$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: myData,
        url: myUrl,
        async: false,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            FirstFunction();
            SecondFunction()
                .then(ThirdFunction()); // This is never reached
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            // Handle Errors
        }
    });
}

function FirstFunction(){
    // Do stuff
}

function SecondFunction() { 
    return $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        datatype: "json",
        data: myData,
        url: myUrl,
        async: false,
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
        },
        success: function (data, textStatus, XmlHttpRequest) {
            console.log("Stuff happened");
        },
        error: function (XmlHttpRequest, textStatus, errorThrown) {
            // Handle Errors
        }
    });
}

function ThirdFunction() {
    // Do more stuff
}

I had also thought of putting ThirdFunction in the success of SecondFunction, but I just feel like it shouldn't have to be done this way. There has to be a reason the process doesn't go back to the success of the InitialFunction after running through SecondFunction. — Shadowxvii, Mar 02 '18 at 16:23
Maybe this is another solution almost similar tho to the one @combatc2 posted: https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done this uses jquery when — G43beli, Mar 02 '18 at 16:27

score 0 · Answer 2 · answered Mar 02 '18 at 16:40

Turns out the problem was in a section I removed when creating the simplified version I included in the original question.

There is nothing wrong with how the $.ajax calls are done.

The problem was in the SecondeFunction. The ajax call there is done inside a loop, and that loop was going through one extra iteration, causing javascript to just stop processing anything after it.

function SecondFunction() { 
    for (var i = 0; i < myArray.length; i++) { // < was <= causing the loop to iterate one extra time
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            data: myData,
            url: myUrl,
            async: false,
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
                XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
            },
            success: function (data, textStatus, XmlHttpRequest) {
                console.log("Stuff happened");
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                // Handle Errors
            }
        });
    }
}

Thanks again for the help, and sorry for the misleading question.

How to resume code in an ajax success after calling another ajax call within the success

2 Answers2