Returning the response from an Jquery AJAX call

Question

I have written a function, which has to check whether a username has been taken or not. Now when I call the function from another function, and alert it's return value:

 alert(checkusernameavailable('justausername')); 

it says 'undefined'. I've searched high and low, but can't find what I'm doing wrong. I guess it should just return the php-echo in check.php, but it doesn't. Here's the function I wrote:

var checkusernameavailable = function(value)  {
    $.ajax({
      url: "check.php",
      type: "POST",
      async: false,
      cache: false,
      data: "username=" + value + "",

      success: function(response) {
        alert(response);
        return response;        
      },
      error: function() {
        alert('ajax error');
      }
    });
  } 

What am I doing wrong?

Answer 1

AJAX calls are async, which means they only return data after the operation has completed. I.e. the method checkusernameavailable never returns any information (unless you tell it to within that method itself). You need to do the following:

// Just fire and forget the method
checkusernameavailable("userName");

// Change the success function to do any display you require
success: function(response) {
    alert(response);
    $("#SomeDiv").html(response);     
  },

The method fires the AJAX async method that posts to check.php. When the response is received, you then handle that response in function associated with the success callback of $.ajax. You can specify a function directly to that success callback as well:

// Change success to point to a function name
success: foo

// Create a function to handle the response
function foo(response)
{
   // Do something with response
}

EDIT:

As per the OP's comment, you need to change your AJAX call to be synchronous, instead of asynchronous (I've never done a synchronous call like this myself, so this is untested):

var ajaxResponse;

$.ajax({
    async: false, 
    success : function (response)
              {
                  ajaxResponse = response;
              },
    // other properties
});

return ajaxResponse;

Full API listing here.