Javascript function containing JQuery ajax - Function returns undefined

Question

Can any give me a clue why this isn't working? The function returns undefined. It alerts a boolean values but still return undefined?!

Thanks

    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 the response of the ajax call

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

Answer 1

The script execution path when using AJAX is not linear. Your IsUniqueEmail will exit before the AJAX request has received a response, returning nothing.

What you're returning is being sent to $.ajax, which is the method that is invoking success, and there it is probably being disregarded.

You could rewrite your code in this manner:

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

        IsUniqueEmail();

        // never follow this link
        return false;

    });
});

In this way, the button click just starts the request - it doesn't go ahead and do anything else. After that, you do all your magic in the AJAX response:

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

You cannot do it that way. IsUniqueEmail(); will be return before the Ajax call finished. It is asynchronous! You have to put the logic into your callback function:

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);
            }
        });
    }            
}

If you specify the data type as JSON, you don't have to use eval to parse it. data will already be an object. And even if data.success contains a string, compare it to a string instead of using eval: data.success == 'true'.