Returning a value from Function with AJAX

Question

I wrote this script FUNCTION to check whether the petty cash is already Set or not using AJAX...

function GetPettyCash() {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("CashSet", "POS")',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                if (data["CashSetIn"] == "true") {
                    alert(data["CashSetAmount"]);
                    return true;
                }
                else {
                    alert(data["CashSetIn"]);
                    return false;
                }

            },
            error: function (req, status, errorObj) {
                alert(errorObj.toString());
                return false;
            }
        });
    }

I Wrote this Controller for my Ajax Calls:

[HttpGet]
    public JsonResult CashSet()
    {
        Login login = new Login();
        login.CheckPettyCash();
        if (login.CashInSet == true)
        {
            return Json(new
            {
                CashSetIn = "true",
                CashSetAmount = login.CashInAmount

            },JsonRequestBehavior.AllowGet);
        }
        else
        {
            return Json(new
            {
                CashSetIn = "false",
                CashSetAmount = "0"
            }, JsonRequestBehavior.AllowGet);
        }
    }

My Controller returns this JSON:

{"CashSetIn":"true","CashSetAmount":1000}

But my Function in the JS script always returns undefined... Any suggestion on how to fix this?

I tried testing it:

alert(data["CashSetAmount"]);
//the Result: 1000

alert(data["CashSetIn"]);
//the Result: true

alert(data);
//the Result: [object Object]

Answer 1

$.ajax does not wait for the AJAX request to return. It instead starts the request and continues. If you changed your function to

function GetPettyCash() {
        $.ajax( //...
        );
        return true;
    }

It would always return true. The return values you are specifying are the return values for the anonymous callback functions that you defined with the function keyword.

You need to use the callback functions to notify your page of incoming data. You do not want to write a function that causes the whole page to wait until a response is received.

For example, you could do something like this:

function GetPettyCash() {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("CashSet", "POS")',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                if (data["CashSetIn"] == "true") {
                    do_something_with_petty_cash(true);
                }
                else {
                    do_something_with_petty_cash(false);
                }

            },
            error: function (req, status, errorObj) {
                alert(errorObj.toString());
                return false;
            }
        });
    }
function do_something_with_petty_cash(petty_cash) {
       if (petty_cash)
           // ...
    }