Jump to content

Strange Ajax Behavior


MrFish
 Share

Recommended Posts

I'm getting some strange ajax behavior. I'll show you the link but you DO NOT have to sign up (I'll just delete you from the database later anyway).1. Go to http://chameleonsoundscape.com/2. Click on Free Signup!3. Click the X at the top right without clicking the signup button or anything.4. Click on the Free Signup! again (you will see it says you've successfully signed up).What's wrong with this is, you should only see that if and only if ajaxRequest.readyState==4 and the response text is 'user added'. But if you never click the signup button you don't ever send an ajax request and therefore readyState can't equal 4. And in addition, the information the would have been sent (theoretically) wouldn't even be valid and the response text wouldn't come out as 'user added'. Here is the ajax/javascript code-

<script type="text/javascript">/*---------------AJAX STUFF---------------*/	//Check ajax support and set ajaxRequest	if(window.XMLHttpRequest){		ajaxRequest = new XMLHttpRequest();		} else if(window.ActiveXObject){			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");			} else {				alert("Your browser broke!");			}				//Signup	function signup(){	var username = document.getElementById("username").value;	var password = document.getElementById("password").value;	var password2 = document.getElementById("password2").value;	var email = document.getElementById("email").value;	var newsletter = document.getElementById("newsletter").value;	var params = "username="+username+"&password="+password+"&email="+email+"&newsletter="+newsletter;	//Check empty forms		if(username == null || username == ""){		document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">You didn\'t enter a username. What were you thinking?</style>';	} else if (password == null || password == ""){		document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">You didn\'t enter a password.</style>';	} else if (password != password2){		document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">The passwords you\'ve entered do not match.</style>';	} else if (email == null || email == ""){		document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">You didn\'t enter an email address.</style>';		} else { 					ajaxRequest.onreadystatechange = function(){				if(ajaxRequest.readyState==1){					document.getElementById("signupforms_message").innerHTML='<img src="images/loadingbar.gif" style="width:360px">';				}				if(ajaxRequest.readyState==4){					document.getElementById("signupforms_message").innerHTML='';					response = ajaxRequest.responseText;						/* Analyze Response */						if(response == "username taken"){							document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">The username \'' + username + '\' is already taken.</style>';						} else						if(response == "user added"){							document.getElementById("signupforms_container").innerHTML = '<text style="color:#36F; font-size: 18px;">You have successfully signed up!</text><text style="font-style: italic; color #999;"><br />Closing automatically in 3 seconds...</text>';							setTimeout("auto_close()", 3000);						} else {							alert(response);						}				}			}			ajaxRequest.open("POST", "includes/signupforms_handler.php", true);			ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");			ajaxRequest.setRequestHeader("Content-length", params.length);			ajaxRequest.setRequestHeader("Connection", "close");			ajaxRequest.send(params);		}	}/*----------------------------------------*/	function close_signup(){		document.getElementById("blackout").style.visibility="hidden";			document.getElementById("signup_message").style.visibility="hidden";	}	function open_signup(){		document.getElementById("blackout").style.visibility="visible";		document.getElementById("signup_message").style.visibility="visible";	}	function auto_close(){		blackout = document.getElementById("blackout");		if(blackout.style.opacity==0.6){			blackout_fadeout();		}	}	function fadein(){		blackout = document.getElementById("blackout");		if(i < 0.6){			blackout.style.opacity = i+0.06;			i += 0.06;			setTimeout("fadein()",10);		}	}	function blackout_fadein(){		blackout = document.getElementById("blackout").style;		message = document.getElementById("signup_message").style;		blackout.visibility = 'visible';		message.visibility = 'visible';		i = 0;		fadein();	}		function fadeout(){		blackout = document.getElementById("blackout");		if (document.getElementById("signupforms_container").innerHTML='<text style="color:#36F; font-size: 18px;">You have successfully signed up!</text><text style="font-style: italic; color #999;"><br />Closing automatically in 3 seconds...</text>'){			setTimeout("auto_close()", 3000);		}		if(i > 0){			blackout.style.opacity = i-0.06;			i -= 0.06;			if(i<=0){				blackout.style.visibility = "hidden";			}			setTimeout("fadeout()",10);		}	}	function blackout_fadeout(){		message = document.getElementById("signup_message").style;		message.visibility = 'hidden';		i = 0.6;		fadeout();	}</script>

Is there another code tag I could use that isn't so hard to read?

Link to comment
Share on other sites

Hi, i found this:if(response == "username taken"){document.getElementById("signupforms_message").innerHTML = '<text style="color:#F00;">The username \'' + username + '\' is already taken.</style>';} elseif(response == "user added"){document.getElementById("signupforms_container").innerHTML = '<text style="color:#36F; font-size: 18px;">You have successfully signed up!</text><text style="font-style: italic; color #999;"><br />Closing automatically in 3 seconds...</text>';setTimeout("auto_close()", 3000);}else {alert(response);}i don't know if you are doing a else if, but that piece of code there is something similar to:else{if(response .....)}

Link to comment
Share on other sites

Oh really? I thought it was possible to have

} else if() {

or maybe

}elseif() {

Is different when you add the return?

Edited by MrFish
Link to comment
Share on other sites

Oh really? I thought it was possible to have
} else if() {

or maybe

}elseif() {

Is different when you add the return?

else if() is completely fine in Javascript. If there's a problem in your script, that wouldn't be it.I think this part might be responsible for your problem
function fadeout(){  blackout = document.getElementById("blackout");  if (document.getElementById("signupforms_container").innerHTML='<text style="color:#36F; font-size: 18px;">You have successfully signed up!</text><text style="font-style: italic; color #999;"><br />Closing automatically in 3 seconds...</text>') {  setTimeout("auto_close()", 3000);}

You're using an assigning = instead of the comparing ==.Also, <text> isn't a valid HTML element, try <span> instead.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...