Promote callback onSuccess return value to the Caller Function return value

Question

I have a javascript function that calls a generic function to make an ajax call to the server. I need to retrieve a result (true/false) from the callback function of the ajax call, but the result I get is always 'undefined'.

A super-simplified version of the generic function without all my logic would be:

function CallServer(urlController) {
    $.ajax({
        type: "POST",
        url: urlController,
        async: false,
        data: $("form").serialize(),
        success:
            function(result) {
                if (someLogic)
                   return true;
                else
                   return false;
            },
        error:
            function(errorThrown) {
                return false;
            }
    });
}

And the function calling it would be something like:

function Next() {
        var result = CallServer("/Signum/TrySave");
        if (result == true) {
            document.forms[0].submit();
        }
    }

The "result" variable is always 'undefined', and debugging it I can see that the "return true" line of the callback function is being executed.

Any ideas of why this is happening? How could I bubble the return value from the callback function to the CallServer function?

Thanks

Answer 1

I usually put any code to be executed on success inside the callback function itself. I don't think CallServer() actually receives the return values from the callbacks themselves.

Try something like:

function CallServer(urlController) {
    $.ajax({
        type: "POST",
        url: urlController,
        async: false,
        data: $("form").serialize(),
        success:
            function(result) {
                if (someLogic)
                   document.forms[0].submit();
                else
                   // do something else
            },
        error:
            function(errorThrown) {
                // handle error
            }
    });
}

Edit: I'm not too familiar with jQuery, so I might be completely wrong (I'm basing this on the behavior of other frameworks, like YUI, and AJAX calls made without any framework). If so, just downvote this answer and leave a comment, and I will delete this answer.

Answer 2

Just found how to do it :) Declaring a variable and updating it accordingly from the callback function. Afterwards I can return that variable. I place the code for future readers:

function CallServer(urlController) {
    var returnValue = false;
    $.ajax({
        type: "POST",
        url: urlController,
        async: false,
        data: $("form").serialize(),
        success:
            function(result) {
                if (someLogic){
                    returnValue = true;
                    return;
                }
            },
        error:
            function(errorThrown) {
                alert("Error occured: " + errorThrown);
            }
        });

        return returnValue;
}

Answer 3

Just in case you want to go the asynchronous way (which is a better solution because it will not freeze your browser while doing the request), here is the code:

function CallServer(urlController, callback) {
    $.ajax({
        type: "POST",
        url: urlController,
        async: true,
        data: $("form").serialize(),
        success:
            function(result) {
                var ret = ( someLogic );
                callback(ret);
            },
        error:
            function(errorThrown) {
                return false;
            }
    });
}

function Next() {
    CallServer("/Signum/TrySave", function(result) {
     if (result == true) {
      document.forms[0].submit();
     }
    });
}