Jquery Ajax Script Not Working - php

Question

I have a problem with ajax/php script.
It is for checking Username avaibility for user registration.
javascript
$(document).ready(function()
{
$("#username").change(function()
{
var usr = $("#username").val();
if(usr.length >= 4)
{
$("#status").html('<img src="./style/images/loading.gif"> Checking availability...');
$.ajax(
{
type: "POST",
url: "./ps/ajax_validation.php",
data: "username="+ usr,
success: function(msg)
{
$("#status").ajaxComplete(function(event, request, settings)
{
if(msg == 'OK')
{
$(this).html(' <img src="./style/images/tick.gif" align="absmiddle">');
}
else
{
$(this).html(msg);
}
});
}
});
}
else
{
$("#status").html('<font color="red">The username should have at least <strong>4</strong> characters.</font>');
}
});
});
html
...
<input class="login_reg_field" id="username" name="username" type="text" value="<?php echo #$d['username']?>" />
<div id="status"></div>
...
ajax_validation.php
<?php
include("../core/config.php");
if(isset($_POST['username'])){
$username = $_POST['username'];
$test = $user->checkUsernameAvaible($username); //Return True if Username IS Avaible
if(!$test){
echo '<font color="red">The nickname <STRONG>'.$username.'</STRONG> is already in use.</font>';
}else{
echo "OK";
}
}
?>
The php script is working, i tried it manually with $_GET variables..
When trying on the form, it stay on Checking avaibility... and No Javascript error on Firefox Console.
Also i've checked with Tamper Data, that the ajax request it's being made, and it is.
The problem seems to be on $("#status").ajaxComplete(function(event, request, settings){ because i've tried with an alert after this line, and no alert popping up.

Answer 1

update..
success is called whn the ajax call succeeds. so ther eis no need to call ajaxComplete there.. (if u think there is the problem)..
success
A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
you can just check the response data and do your stuff..
success: function(msg){
if(msg == 'OK')
{
$(this).html(' <img src="./style/images/tick.gif" align="absmiddle">');
}
else
{
$(this).html(msg);
}
}
i think the problem is here
$("#username").change(function()
{
change() on input text fires only when you click somewhere outside the input field.. //try it once.
what you need is keyup()
$("#username").keyup(function()
{

Answer 2

Ok Answering my own question, i've solved.
Want to thank itachi for letting me know to use .done instead of success:
The problem was there.
Here is the revised and working part of the script:
var req = $.ajax(
{
type: "POST",
url: "./ps/ajax_validation.php",
data: "username="+ usr,
}).done(function(msg)
{
if(msg == 'OK')
{
$("#status").html(' <img src="./style/images/tick.gif" align="absmiddle">');
}
else
{
$("#status").html(msg);
}
});