Question

I have the code to prevent postback but failed. Basically I have an asp.net button.

<asp:Button ID="btnSave" runat="server" Text="SaveChanges" OnClick="btnSave_Click"
        CssClass="saveButton" ValidationGroup="answer" OnClientClick="return ValidateUserNameBeforeSubmitting();" />

And ajax call web service.

function ValidateUserName() {
        $.ajax({ type: "POST",
            url: "../UserNameWebService.asmx/ValidateUserName",
            data: "{'strUsername': '" +JSON.stringify( $("#<%=TextUserName.ClientID%>").val()) + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            async: false,
            success: function (data) {
                return data.d;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    }


    function ValidateUserNameBeforeSubmitting() {
        var isValid = ValidateUserName();
        return isValid;
    }

The web service will return a boolean value and it does when I step into the code.
However when I stepped into the javascript code, I found that “isValid” is not a boolean value. It is “undefined”.
Why?

Thanks.

Answer 1

Ajax is asynchronous.

var isValid = ValidateUserName();

this line executes, but function you’re calling has no return (hence undefined)

if you want to access a variable returned from ajax, it needs to be in the success handler.

function ValidateUserName() {
    var returnValue;
    $.ajax({ type: "POST",
        ...
        async: false,
        success: function (data) {
            returnValue = data.d;
        },
        ...
    });
    return returnValue;
}