tjyoung
asked on
Problem with JQuery/Ajax statement not updating div
Hi,
I'm working on a username availability script.
All works fine, it checks, the server responds back either a 1 or a 0 (can see it in firebug).
So all works except its not updating the div with the results.
If my username is too short, it updates, but the server response its not catching.
Any idea why?
I'm working on a username availability script.
All works fine, it checks, the server responds back either a 1 or a 0 (can see it in firebug).
So all works except its not updating the div with the results.
If my username is too short, it updates, but the server response its not catching.
Any idea why?
$(document).ready(function()//When the dom is ready
{
$("#username").change(function()
{ //if theres a change in the username textbox
var username = $("#username").val();//Get the value in the textbox
if(username.length > 3)//if the lenght greater than 3 characters
{
$("#availability_status").html('<img src="loader.gif" align="absmiddle"> Checking availability...');
//Add a loading image in the span id="availability_status"
$.ajax({ //Make the Ajax Request
type: "POST",
url: "application/check.php", //file name
data: "username="+ username, //data
success: function(server_response){
$("#availability_status").ajaxComplete(function(event, request){
if(server_response == '0')//if check.php return value "0"
{
$("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font> ');
//add this image to the span with id "availability_status"
}
else if(server_response == '1')//if it returns "1"
{
$("#availability_status").text('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
}
});
}
});
}
else
{
$("#availability_status").html('<font color="#cc0000">Username too short</font>');
//if in case the username is less than or equal 3 characters only
}
return false;
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try cache: false in your ajax call like
$.ajax({ //Make the Ajax Request
type: "POST",
url: "application/check.php", //file name
cache: false,
data: "username="+ username, //data
.
.
.
.
.
.
$.ajax({ //Make the Ajax Request
type: "POST",
url: "application/check.php", //file name
cache: false,
data: "username="+ username, //data
.
.
.
.
.
.
and
instead of
$("#availability_status"). text('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
use
$("#availability_status"). html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
instead of
$("#availability_status").
use
$("#availability_status").
ASKER
Although I'm having some trouble yet, its because I've got a bunch of other voodoo in my file. The solution shown works.
Thanks
Thanks
$("#availability_status").
it's not needed