Return statement is called before ajax call

Question

I have a custom validator to check if the entered number is unique or not. If the number is not unique it should return false.

the javascript code is like this:

function ValidatePAuthNo(sender, args) {

        //args.IsValid = true;

        var PAuthNo = $('[id$=tbPriorAuthNumber]').val();

         $.ajax({
            type: "POST",
            url: "MedicaidPriorAuth.aspx/IsPAuthUnique",
            data: JSON.stringify({ pAuthNo: PAuthNo }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            error: function (response) {
                alert(" An error occurred." + response.error);
            },
            success: function (data) {
                if (data.d == false) {
                    //alert("P. Auth# already exists! Please enter new P. Auth #.");
                    $("[id$=lblError]").val("P. Auth# already exists! Please enter new P. Auth #.");
                    args.isValid = false;
                } else {
                    $("[id$=lblError]").val("");
                    args.isValid = true;
                }

            }
        });


        return args.IsValid;
    }

My Web method is returning correct value, however, problem is that return args.IsValid is called before ajax method. Am I doing something wrong here? If my approach is wrong what could be the correct approach to do this from client side?

Recommended reading - [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — neilsimp1, Jan 11 '16 at 20:54
This has nothing to do with asp.net it's ajax and ajax means asynchronous JavaScript and XML so ajax calls by default (unless you set async: false option) are anychronous, your function will return before you get response from server. pass a callback function to execute after server response. review your code design — lyz, Jan 11 '16 at 22:44

QBM5 · Answer 1 · 2016-01-11T21:04:45.753

The ajax method is an asynchronous call, this means it sends a request to the server and the server returns it in its own time. In the mean time execution of the thread (javascript) continues. This means you cannot return the response from the ajax call because the return will occur before the response form the server arrives.

The solution is a callback method. You can do this with jquery promises but for simplicity the example below just uses javascrpt. https://api.jquery.com/promise/

Also this is a very easy to find question, you should try to search for answers before posting a new question

function ValidatePAuthNo(sender, args, callback) { // call back is a function you pass as an argument

    //args.IsValid = true;

    var PAuthNo = $('[id$=tbPriorAuthNumber]').val();

     $.ajax({
        type: "POST",
        url: "MedicaidPriorAuth.aspx/IsPAuthUnique",
        data: JSON.stringify({ pAuthNo: PAuthNo }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        error: function (response) {
            alert(" An error occurred." + response.error);
        },
        success: function (data) {
            if (data.d == false) {
                //alert("P. Auth# already exists! Please enter new P. Auth #.");
                $("[id$=lblError]").val("P. Auth# already exists! Please enter new P. Auth #.");
                args.isValid = false;
            } else {
                $("[id$=lblError]").val("");
                args.isValid = true;
            }
             callback(args.isValid);
        }
    });
}

Return statement is called before ajax call

1 Answers1