Simple - Ajax Question - mysql/innerHTML issue with IE6?

Al Neri

Diamond Member
Jan 12, 2002
5,680
1
76
Simple - Ajax Question - mysql/innerHTML issue with IE6?
What's up.

OK, I more or less am brand new to Ajax, so be easy :)

I put together this quick form that allows a user to sign up - the data.php just basically checks a mysql db if the username exists, and either

-if it doesn't exist - create an entry in the database with the username, pw, and email and echo "Congratulations, you are added";
-if it does exist - it echo "Sorry but 'xxx' is already taken, try again!";

This is the weird part though. This works perfect in FF, but IE6 has a weird issue (I only have IE6 here can't test anything else) - With IE6, if the page is freshly loaded, it gives me the correct message - that is, if i put a non-existent name in, it does the echo "Congratulations, you are added"; but if I click on submit again - it doesn't echo "Sorry but 'xxx' is already taken, try again!"; (it does on FF) -

If I start a fresh page and input a name that's already in the database it does echo "Sorry but 'xxx' is already taken, try again!"; -- but if i change the username to something that doesn't exist - it doesn't change the echo (i.e. it still says "Sorry but 'xxx' is already taken, try again!"; - but the record is created in mysql!

I hope this makes sense - thanks for any help!

matRocka

code:


Code:
<html>
<body>

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4)
		{
			var output = document.getElementById("output");
			//response text is either Congratulations you signed up if there's no match, and sorry USERNAME is taken if there's a match
			output.innerHTML = ajaxRequest.responseText;
		}
	}
	
	var username = document.getElementById("user").value;
	var email = document.getElementById("email").value;
	var pw = document.getElementById("pw").value;
	var url = "";
	var errormsg = "";
	var error = 0;
		
		if (username == "") {error=1;  errormsg = errormsg + "Please enter a username\n";} 
		if (email == "") {error=1;  errormsg = errormsg + "Please enter an email\n";} 
		if (pw == "") {error=1;  errormsg = errormsg + "Please enter a pw\n";} 
		
		if (error == 1)
			{
			alert(errormsg);
			}
			
		else 
			{
			
			url = "data.php?user=" + escape(username) + "&email=" + escape(email) + "&pw=" + escape(pw);
			ajaxRequest.open("GET", url, true);
			ajaxRequest.send(null); 
			}
}

//-->
</script>



<form name='myForm'>
<table>
			<tr>
				<td>Username</td><td><input type="text" name="user" id="user" /></td>
			</tr>
			<tr>
				<td>PW</td><td><input type="text" name="pw" id="pw" /></td>
			</tr>
			<tr>
				<td>E-mail</td><td><input type="text" name="email" id="email" /></td>
			</tr>	
			<tr>
				<td colspan="2"><input type="button" name="button" value="Register" onclick="ajaxFunction();" style="width:100%;"></td>
			</tr>
		</table>
	<span name="output" id="output"></span><BR>
	<span name="output2" id="output2"></span><BR>


			
</form>
</body>
</html>
 

txrandom

Diamond Member
Aug 15, 2004
3,773
0
71
I haven't really looked at the code yet, but it seems like IE6 is not going out and getting another request. It may be simply "caching" the old response.

Add this to your HTML head:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

If you aren't getting a full HTML document back, add this to the end of your url string "&now()" where now() is just the current timestamp. The function may be time() in Javascript, but just google it. This should trick IE6 into think it's getting a different document, but in reality it's not. I had to do this with a Flash slideshow thing a months ago. Hopefully this solves the problem. Let us know if it doesn't.

Edit to expand on the previous paragraph:

You are basically changing the url from index.php?username=txrandom&time=1234 to index.php?username=txrandom&time=1235

After rereading your post, I may be approaching it wrong. Do you have a link to where all this is?
 

PhatoseAlpha

Platinum Member
Apr 10, 2005
2,131
21
81
Scoping problem, maybe? Not too sure about how scope on inline function declared in functions works, but it seems a possible culprit. Try changing the onreadystate function so that all references to ajaxrequest in the inline function are this.
 

txrandom

Diamond Member
Aug 15, 2004
3,773
0
71
I tested it out.

Add this next to your other variable:
var date = new Date();

Change the url variable to:
"data.php?user=" + escape(username) + "&email=" + escape(email) + "&pw=" + escape(pw) + "&time=" + date.getTime();
 

sourceninja

Diamond Member
Mar 8, 2005
8,805
65
91
Sense you are new to ajax I can understand doing it the hardway as a learning experience. But I would really encourage you to switch to jquery, prototype, or some other javascript library. It will reduce the amount of code you write by at least 10 fold and make all the common dom manipulations that are so frustrating to do in javascript a breeze. Plus everything will just work in all major browsers.
 

txrandom

Diamond Member
Aug 15, 2004
3,773
0
71
Originally posted by: sourceninja
Sense you are new to ajax I can understand doing it the hardway as a learning experience. But I would really encourage you to switch to jquery, prototype, or some other javascript library. It will reduce the amount of code you write by at least 10 fold and make all the common dom manipulations that are so frustrating to do in javascript a breeze. Plus everything will just work in all major browsers.

I second this. I'd download JQuery and start reading through the documentation.
 

DannyBoy

Diamond Member
Nov 27, 2002
8,820
2
81
www.danj.me
Originally posted by: txrandom
Originally posted by: sourceninja
Sense you are new to ajax I can understand doing it the hardway as a learning experience. But I would really encourage you to switch to jquery, prototype, or some other javascript library. It will reduce the amount of code you write by at least 10 fold and make all the common dom manipulations that are so frustrating to do in javascript a breeze. Plus everything will just work in all major browsers.

I second this. I'd download JQuery and start reading through the documentation.

Third recommendation for jQuery.