How can I get returned value from JavaScript function that contain jQuery.get() ?

Question

I have a JavaScript method that call JQuery.get() and i want to return value from itto callee function .. the following is the code :

function CheckExistance(userName) {
        $.get(
            "JQueryPage.aspx", { name: userName },
             function(result) {
                 if (result == "1") {
                     value = true;
                 }
                 else if (result == "0") {
                     value = false;
                 }
                 else if (result == "error") {
                     value = false;
                 }
             }
        );                
        return value;
    }

i want return value; return the value setted in get() function ... i know that get() is asynchronous operation anf i want a solution to do that ?

Answer 1

You cannot "return" the value into the called function; because as you've realised, the AJAX call is asynchronous. Instead, you need to effectively delay the execution of the code that follows the AJAX call; by placing this code in the callback function instead.

What happens now, is that this code is executed when the AJAX request has completed, and the value is available.

function CheckExistance(userName, callback) {
        $.get(
            "JQueryPage.aspx", { name: userName },
             function(result) {
                 var value = false;

                 if (result == "1") {
                     value = true;
                 }


                 callback(value);
             }
        );                
    }

Then where your function might previously have been:

function validateUserName() {
    var input = $('someField').val();
    var isUnique = CheckExistance(input);

    if (isUnique) {
       // whatever
    } else {
       alert("This username is already taken");
    };
};

Should now be:

function validateUserName() {
    var input = $('someField').val();

    CheckExistance(input, function (isUnique) {
       if (isUnique) {
          // whatever
       } else {
          alert("This username is already taken");
       };
    });
};

Answer 2

This might work;

function CheckExistance(userName) {
    var value
    $.get(
        "JQueryPage.aspx", { name: userName },
         function(result) {
             if (result == "1") {
                 value = true;
             }
             else if (result == "0") {
                 value = false;
             }
             else if (result == "error") {
                 value = false;
             }
         }
    );
while(value == undefined);
    return value;
}