Check username availability using ajax

Question

I want to check if a username is available or not.

I'm following this: http://phppot.com/demo/live-username-availability-check-using-php-and-jquery-ajax/

I keep getting the error alert, whats wrong?

The Ajax call :

function checkAvailability() {
    $("#loaderIcon").show();
    $.ajax({
        url: "check_availability.php",
        data:'username='+$("#username").val(),
        type: "POST",
        success:function(data){
            $("#user-availability-status").html(data);
            $("#loaderIcon").hide();
        },
        error:function (){alert("error");}
    });
}

Server side:

<?php
/* this is check_availability.php  file */
  $con=  mysqli_connect('localhost','root','password','user') or die(mysqli_error());
  if($con)  { echo 'connected';}
  $username=mysqli_real_escape_string($con, $_POST['username']);
  $query="SELECT * FROM username_list WHERE     username='$username' ";
  $result=  mysqli_query($con,$query);
  $rowCount=  mysqli_num_rows($result);
  if($rowCount>0) {
      echo "<span class='status-not-available'> Not Available.</span>";
  } else {
      echo "<span class='status-available'> Username Available.</span>";
  }
?>

Answer 1

Very hard to determine whats going on without some more information as mentioned and a test case.

Here is what is probably happening in your case: The ajax call fails, I can say that for sure since the error functions executes

error - Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an

The problem is probably that the target is not reachable - change your code and then open your console to see whats really going on. I also changed your ajax call to a better format:

function checkAvailability() {
   var username_tocheck = $("#username").val(); //Probably you want to validate it before you send
   $.ajax({
           url: "check_availability.php", // Try full url too
           data: { username :  username_tocheck },
           method: "POST",  //  POST | GET
           dataType: "html", // xml,json,script,html
           beforeSend: function() {
                 $("#loaderIcon").show();
           },
           success:function(data){
                 $("#user-availability-status").html(data);
                 $("#loaderIcon").hide();
           },
           error:function ( jqXHR, textStatus ){
                alert("error: " + textStatus);
                console.log("error: " + textStatus);
           }
   });
}

As you can see I made allot of changes:

1. Changed the data to an object.
2. Changed type to method .
3. Added dataType - set to whatever you need.
4. Moved the loader icon to the beforeSend handler - you probably prefer to hide it in a always handler.
5. Exposed the actual error.

Have fun exploring.