undefined response, ajax is not working?

Question

I'm Very Green when it comes to the Front End Development, I'm trying to Insert Data using Modal, I have two text boxes the first is code and the second is name.. I need them to be unique:

 $.validator.addMethod("codeNotUsed", function (value, element) {
                    var response;
                    $.ajax({
                        type: "POST",
                        url: "Profile_ValidatieProfileCode.ashx",
                        data: { code: $('#txtCode').val() },
                        async: false,
                        success: function (data) {
                            response = eval(data);
                        }
                    });
                    alert(response);
                    return response;

                }, "Code already used");

 $.validator.addMethod("nameNotUsed", function (value, element) {
                    var response;
                    $.ajax({
                        type: "POST",
                        url: "Profile_ValidateProfileName.ashx",
                        data: { name: $('#txtName').val() },
                        async: false,
                        success: function (data) {
                            response = eval(data);
                        }
                    });

                    return response;

                }, "Name already used");

the content of one of the .ashx files:

 Imports System.Web
 Imports System.Web.Services

 Public Class Profile_ValidateProfileName
Implements System.Web.IHttpHandler

Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

    context.Response.ContentType = "text/plain"

    Dim name = context.Request.Form("name")

    Try
        Dim type = DataFactory.Instance.GetProfileByName(UserIdentity.ClientConfig.ConnectionString, name)

        If IsNothing(type) Then
            context.Response.Write("true")
        Else
            context.Response.Write("false")
        End If

    Catch ex As Exception
        context.Response.Write("false")
    End Try


End Sub

ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return False
    End Get
End Property

End Class

HTML Code:

 <form id="InputForm" name="InputForm" action="javascript:void(0);" novalidate="novalidate"><div id="InputFormContent">
        <br>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label>Code</label>
                    <div class="icon-addon">
                        <input id="txtCode" name="txtCode" class="form-control required" maxlength="10">
                        <i class="fa fa-edit"></i>
                    </div>
                </div>
            </div>
        </div>

         <div class="row">
            <div class="col-xs-12">
                <div class="form-group">
                    <label>Name</label>
                    <div class="icon-addon">
                        <input id="txtName" name="txtName" class="form-control required" maxlength="30">
                        <i class="fa fa-edit"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>

The unique validation is not working and I thing that's the ajax code is not working well, the alert gives me 'Undefined'..

Answer 1

your calling ajax is invalid, because you must call ajax first and after done, check result and call &.validator.addMethod

$.ajax({
    type: "POST",
    url: "Profile_ValidatieProfileCode.ashx",
    data: { code: $('#txtCode').val() }
}).done(function (data) {
    var response = eval(data);
    alert(response);
    $.validator.addMethod("codeNotUsed",function (value, element) { return response;}, "Code already used");
});

$.ajax({
    type: "POST",
    url: "Profile_ValidateProfileName.ashx",
    data: { name: $('#txtName').val() }
}).done(function (data) {
    var response = eval(data);
    alert(response);
    $.validator.addMethod("nameNotUsed",function (value, element) { return response;}, "Name already used");
});

Answer 2

the alert statement was executed before success function is even called, executing the alert statement after ajax request is done is working better in this case: The Code:

$.validator.addMethod("codeNotUsed", function (value, element) {

                    var response;
                    $.ajax({
                        type: "POST",
                        url: "Profile_ValidatieProfileCode.ashx",
                        data: { code: $('#txtCode').val() },
                        async: false,
                        error: function (xhr, status, error) {
                            alert(error)
                        }
                    }).done(function (data) {
                        response = eval(data);
                        alert(response); // this will give true or false accourding to server response
                    });
                    return response;


                }, "Code already used");

                $.validator.addMethod("nameNotUsed", function (value, element) {


                        var response;
                        $.ajax({
                            type: "POST",
                            url: "Profile_ValidateProfileName.ashx",
                            data: { name: $('#txtName').val() },
                            async: false,
                            error: function (xhr, status, error) {
                                alert(error)
                            }
                        }).done(function (data) {
                            response = eval(data);
                            alert(response); // this will give true or false accourding to server response

                        });

                        return response;
                    }, "Name already used");