jQuery Ajax success variable

Question

Hello. I have the next function. My PHP script returns an array with element error with value 'ERR':

var updatePaymentType = function(plan_pt_id, pt_id){
    var error = null;
    var data = new Object()
    data["function"]             = "update";
    data["payment_type_id"]      = pt_id;
    data["plan_payment_type_id"] = plan_pt_id;
    data["data"]            = $("#saveform").serializeArray();
    $.ajax({
        type: "POST",
        url: "<?=ROOT_PATH?>/commission/plan/edit/id/<?=$this->editId?>",
        data: data,
        dataType: "json",
        success : function (data)
        {
            error = data['error'];
            alert(error); // All works. Output ERR
        }
    });
    alert(error); // Not work. Output null
    return error;
};

My function should returns an error. But it returns null. Thank you very much.

Answer 1

AJAX requests are asynchronous, meaning the value isn't set until after you already returned (the success handler runs later, when the server responds with data).

To return the error type you have to make it synchronous with async: false like this:

$.ajax({
    async: false,
    type: "POST",
    ...

But this locks up the browser, it's better to call whatever uses the value from your success callback, like this:

    success : function (data)
    {
        var error = data['error'];
        functionThatTakesError(error);
    }