Why does my jQuery AJAX function always return false?

Question

function check_username(){
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "/ajax/check/username.html",
        data: "via=ajax&username="+$('input[name=register_username]').val(),
        success: function(msg){
            if(msg.response==false){
                register_username.parent().css('background-color','#db2e24');
                register_username.parent().parent().find('td:last-child').text(msg.message);
                register_username.focus();
                return false;
            } else {
                register_username.parent().css('background-color','#fff');
                register_username.parent().parent().find('td:last-child').text("");
                return true;
            }
       }
    });
}

I'm sorry if my English isn't good -- English is not my native language. Back to the topic, why does the function above always return false? FYI : the JSON is OK

Answer 1

check_username calls an ajax function which starts a networking operation and then returns immediately. check_username returns long before the ajax call finishes and the success handler gets called. Thus, the success handler has NOTHING to do with the value that check_username returns.

Since there is no return value in the check_username function itself (only in the embedded success handler function), check_username returns undefined which is a falsey value, thus you think it's always returning false.

If you want to do something with the return value from the success handler, then you have to either operate in the success handler itself or you have to call another function from the success handler. This is how asynchronous operations work.

Returning true or false from the success handler function does nothing. The success handler is called by the internals of the ajax handling code and returning from the success handler just goes into the bowels of the ajax internals. The return value from the success handler is not used in any way.

Answer 2

The problem is the logical condition msg.response==false.. this always evaluates to false, the response is not a boolean. You need to check the response status instead.

Answer 3

If I had to guess, you post, and the response returned is a JSON object. But it looks like your just checking to see if you got a valid response. Why not try it this way:

Try this:

function check_username()
        {
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/ajax/check/username.html",
                data: "via=ajax&username="+$('input[name=register_username]').val(),
                success: function( msg, textStatus )
                {
                    if ( textStatus == "success" )
                    {
                        register_username.parent().css('background-color','#db2e24');
                        register_username.parent().parent().find('td:last-child').text(msg.message);
                        register_username.focus();
                        return false;
                    } else {
                        register_username.parent().css('background-color','#fff');
                        register_username.parent().parent().find('td:last-child').text("");
                        return true;
                    }
                },
                error: function( jqXHR, textStatus, errorThrown )
                {
                    if ( textStatus == "parsererror" )
                    {
                        alert( "There is an error in your JSON object" );
                    }
                }
            });
        }

The other problem you could have is that your not returning valid json, which jQuery will check. Adding an error will help reveal if this is indeed the case.

Live demo http://jsfiddle.net/khalifah/4q3EJ/