Javascript function containing jQuery ajax - Function returns undefined

Question

Can someone let me know why this is not working? The function returns undefined. It warns booleans, but returns undefined ?!

thank

    function IsUniqueEmail() {

        var email = $("#<%=EmailAddress.ClientID%>").val();

        if (email.length > 0) {

            $.ajax({
                url: 'handlers/validator.ashx',
                dataType: 'json',
                data: { "n": "email", "v": email },
                async: false,
                success: function(data) {
                    alert(eval(data.success));
                    return eval(data.success);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                    return true;
                }
            });
        }            
    }

    $(document).ready(function() {

        var execScript = $(".buttonStep1").attr("href").replace("javascript:", "");

        $(".buttonStep1").attr("href", "#").click(function() {
            // Add before click logic here
            var IsOk = IsUniqueEmail();
            if (IsOk) {
                $("#EmailAddressInUseMessage").hide();
                eval(execScript);
            }
            else {
                $("#EmailAddressInUseMessage").show();
            }
        });
    });

this is ajax call response

    { "success": false, "error" : "ERROR_EMAILINUSE" }

Answer 1

The script execution path when using AJAX is not linear. Yours IsUniqueEmailwill exit before the AJAX request receives a response without returning anything.

What you return is sent to $.ajax, this is the method that calls success, and there it probably is not taken into account.

You can rewrite your code this way:

$(document).ready(function() {
    $(".buttonStep1").click(function() {

        IsUniqueEmail();

        // never follow this link
        return false;

    });
});

, click - ​​ . AJAX:

function IsUniqueEmail() {

    var email = $("#<%=EmailAddress.ClientID%>").val();

    if (email.length > 0) {

        $.ajax({
            url: 'handlers/validator.ashx',
            dataType: 'json',
            data: { "n": "email", "v": email },
            async: false,
            success: function(data) {
                alert(eval(data.success));

                if(eval(data.success)) {

                   // Execute code to continue after the click here

                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
                return true;
            }
        });
    }            
}

Answer 2

. IsUniqueEmail(); Ajax-. ! :

function IsUniqueEmail() {

    var email = $("#<%=EmailAddress.ClientID%>").val();

    if (email.length > 0) {

        $.ajax({
            url: 'handlers/validator.ashx',
            dataType: 'json',
            data: { "n": "email", "v": email },
            async: false,
            success: function(data) {
               if (data.success) {
                   $("#EmailAddressInUseMessage").hide();
                   eval(execScript);
               }
               else {
                   $("#EmailAddressInUseMessage").show();
               }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            }
        });
    }            
}

JSON, eval . data . data.success , , eval: data.success == 'true'.

Answer 3

Adding to the other answers what you can do, you need to save the result of the ajax call in a variable that has the scope of your IsUniqueEmail function. Your Ajax callback can access the variable and update it (using closure). After completing the Ajax call, you can return the updated variable (since it is not asynchronous).

function IsUniqueEmail() { 

        var email = $("#<%=EmailAddress.ClientID%>").val(); 
        var isUnique = false;

        if (email.length > 0) { 

            $.ajax({ 
                url: 'handlers/validator.ashx', 
                dataType: 'json', 
                data: { "n": "email", "v": email }, 
                async: false, 
                success: function(data) { 
                    alert(eval(data.success)); 
                    isUnique = eval(data.success); 
                }, 
                error: function(XMLHttpRequest, textStatus, errorThrown) { 
                    console.log(textStatus, errorThrown); 
                    return true; 
                } 
            }); 
        }
        return isUnique;             
    }