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?

 
$(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">&nbsp;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;
});
});

Open in new window

LVL 1
tjyoungAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
why did you put $("#availability_status").ajaxComplete(function(event, request){ inside success callback function?

try this :
$(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">&nbsp;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;
});
});

Open in new window

0
 
EyalCommented:
why do you put this?

$("#availability_status").ajaxComplete(function(event, request)?

it's not needed
0
 
Kiran SonawaneProject LeadCommented:
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
.
.
.
.
.
.
0
 
Kiran SonawaneProject LeadCommented:
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>');
0
 
tjyoungAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.