[FIXED] Why isn't this function returning anything?

Issue

I'm trying to debug some tests - I have the following code:

test('Can get the test Side',
        function () {
            stop();
            debugger;
            var result = getTestSide();
            debugger;
            changeTestSide(result);
        }
    );
    

    // Step 1: Get test side
    function getTestSide() {
        $.ajax({
            type: 'GET',
            url: urlWithId,
            success: function (result) {
                return "test success";
                debugger;
                ok(true, "GET succeeded.");
                if (!result.SideId === testSideId) {
                    throw "GET result does not equal testSideId";
                } else {
                    ok(true, "Returned key matches testSide Id.");
                    return result;
                }
            },
            error: function (result) {
                return "test failure";
                debugger;
                throw "Error";
            }
        });
    };

No matter what, "result" in the top method is always undefined. Why is this? Whether getTestSide succeeds or fails, I'm returning a string.

Solution

Using return inside a nested function returns only from that function. Your code must be structured quite differently to get the effect you want. One way to do this is to pass a callback function into getTestSide that will handle the response, like this:

test('Can get the test Side',
    function () {
        stop();
        debugger;
        getTestSide(function (result) {
            changeTestSide(result);
        });
    }
);


// Step 1: Get test side
function getTestSide(cb) {
    $.ajax({
        type: 'GET',
        url: urlWithId,
        success: function (result) {
            // removed this because it stops the rest from running
            // return "test success";
            ok(true, "GET succeeded.");
            if (!result.SideId === testSideId) {
                throw "GET result does not equal testSideId";
            } else {
                ok(true, "Returned key matches testSide Id.");
                // Call the callback instead of returning.
                cb(result);
            }
        },
        error: function (result) {
            // removed this because it stops the rest from running
            // return "test failure";
            debugger;
            throw "Error";
        }
    });
};

You've also used throw inside your success and error callbacks; these will also not do what I think you expect them to do, since by the time these functions are running your test function has already returned and so there is no way for you to catch those exceptions. Your code didn't show any attempt to catch the exceptions anyway so I didn't attempt to address this, but you can address it by following a similar pattern to the $.ajax function and providing both success and error callbacks that the caller can then implement.

Answered By - Martin Atkins

Answer Checked By - Mildred Charles (PHPFixing Admin)