big Ajax problem .. can't figure it out - php

Question

Hy,
I have a live username validation using ajax :
<td id="user_process_live"><input type="text" id="user_live_ver" name="user" /></td>
abnd the following java :
$("input#user_live_ver").blur(function() {
var username=$(this).val();
var dataString = 'username=' + username;
$.ajax({
type: "POST",
url: "ajax/login_ajax.php",
data: dataString,
cache: false,
success: function(html) {
$("td#user_process_live").html(html);
}
});
});
The login_ajax.php returns the same <input type=text id=user_live_ver name=user /> but with different styles applied (background-color and border-color) : red if username already exist and green if user does not exist ...
The problem is the script does this just one time .. just one .blur() ...
If i remove the .ajax({ ... etc }); and insert alert(dataString); every time i click out that input the alert() is triggered but not the same for the .ajax() ...
What seems to be the problem ? Thanks a lot

Answer 1

The problem is that you are replacing the input after the first ajax request returns so your blur event isn't bound anymore. Try using delegate to bind your event:
var process_live = $("#user_process_live");
process_live.delegate("#user_live_ver", "blur", function() {
var username = $(this).val(),
dataString = {'username': username};
$.ajax({
type: "POST",
url: "ajax/login_ajax.php",
data: dataString,
cache: false,
success: function(html) {
process_live.html(html);
}
});
});

Answer 2

When you add the html string back in with the success function, you loose the event handler attached to the input element.
Maybe try changing the styles on the input depending on what you get back in the success function rather than replacing the HTML entirely.
success: function(result) {
if (result) {
$("input#user_live_ver").addClass("valid");
} else {
$("input#user_live_ver").addClass("invalid");
}
}
All your PHP script has to do now is return true if the username is valid and false if not.
Use json_encode($result)

Answer 3

Maybe the reference for blur event was lost after the html replace, I dont try so I dont know.
but did you try to set the blur event again?

Answer 4

This is probably happening because you're removing the element that $("input#user_live_ver") references and then adding a new one to the DOM, so that blur event binding goes away.
You have two options:
Use .live() to bind the event so that it also binds to future matching elements. More info here.
Don't replace the DOM element in the response from the AJAX resource. Just re-style it. (This will offer slightly better performance as well.)

Answer 5

java*SCRIPT*... they are VERY different things! And, instead of returning an input, why not return a success or fail message and update the class accordingly? Saves a few DOM calls