Ajax & IE problem.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Ajax & IE problem.

Post by JellyFish »

Javascript part:

Code: Select all

var HttpRequest;
try
{
	// Firefox, Opera 8.0+, Safari
	HttpRequest = new XMLHttpRequest();
}
catch (e)
{
	// Internet Explorer
	try
	{
		HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			HttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			alert("Your browser does not support AJAX!");
		}
	}
}

function logIn(username, password)
{
	HttpRequest.onreadystatechange = function () 
	{
		if(HttpRequest.readyState == 4 && HttpRequest.status == 200)
		{
			if (HttpRequest.responseText)
			{
				document.getElementById('log_in_errors').innerHTML = HttpRequest.responseText;
			}
			else
			{
				document.getElementById("log_in_form").style.display = 'none';
				document.getElementById("log_in").style.borderBottom = "1px solid #cbcbcb";
				document.getElementById('my_account').style.display = '';
				document.getElementById('log_out').style.display = '';
				document.getElementById('sign_up').style.display = 'none';
				document.getElementById('log_in').style.display = 'none';

			}
		}
	}

	
	document.getElementById('log_in_errors').innerHTML = '';
	
	HttpRequest.open('POST', 'log_in.php', true);
	HttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	HttpRequest.send("username=" + encodeURI(username) + "&password=" + encodeURI(password));
}

function logOut()
{
	HttpRequest.onreadystatechange = function () 
	{
		if(HttpRequest.readyState == 4 && HttpRequest.status == 200)
		{
				document.getElementById('my_account').style.display = 'none';
				document.getElementById('log_out').style.display = 'none';
				document.getElementById('sign_up').style.display = '';
				document.getElementById('log_in').style.display = ''
		}
	}
	
	HttpRequest.open('POST', 'log_out.php', true);
	HttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	HttpRequest.send(null);
}
log_in.php:

Code: Select all

<?
if ((!$_POST[username]) || (!$_POST[password])) {
	exit("Username or password was not entered.");
}

$db_name = "";
$table_name = "";
$connection = @mysql_connect("", "", "") or die(mysql_error());

$db = @mysql_select_db($db_name, $connection) or die(mysql_error());
$sql = "SELECT * FROM $table_name WHERE username = '$_POST[username]' AND password = '$_POST[password]'";
$result = @mysql_query($sql,$connection) or die(mysql_error());
$num = mysql_num_rows($result);

if ($num != 0) {
	$row = mysql_fetch_array($result);
	if ($row[active] == 1) {

		//start a session
		session_start();

		//asign the value of the username and password to two superglobals
		$_SESSION[username] = ucwords(strtolower($_POST[username]));
		$_SESSION[password] = ucwords(strtolower($_POST[password]));
		$_SESSION[logged] = true;


	} else {
		include("functions.php");
		Table ("<b>Your account has not been activated.</b><BR><br>Please active your account by following the instructions provided in the email that should have been sent to you.<br><BR>If you did not receive such an email.","width='100%' height='100%' align=center");
		exit;
	}

} else {
	exit("Incorrect username or password.");
}
?>

Now, everything works on firefox and opera, when logIn() is called everything goes as planned. But in IE when logIn() is called the first time, every thing goes as planned except for the second and thereafter time(s).

So lets say I input my username, hit submit then calling the function logIn(...), sending a request to the server and the server finds that I only gave my username and that my password was not entered then exiting the php script with the exit(...) function, sending back a message saying how I need to enter my password.

So then I say "Okay" then enter my password and hit submit. Now what happens in internet explorer 6 is my information is sent, session variables are set but the part in my js file:

Code: Select all

				document.getElementById("log_in_form").style.display = 'none';
				document.getElementById("log_in").style.borderBottom = "1px solid #cbcbcb";
				document.getElementById('my_account').style.display = '';
				document.getElementById('log_out').style.display = '';
				document.getElementById('sign_up').style.display = 'none';
				document.getElementById('log_in').style.display = 'none';
doesn't appear to execute. And if I refresh the page I'm logged in so I know that the session variables have been set, it's just the Javascript part that poses a problem.

So, why is it that the second time logIn() is executed in IE6 the piece of Javascript code does not get parsed? And why only in IE6 does this happen?

Thanks for taking the time on read this post, appreciate it.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

this is just begging for jQuery!!!!!!!!!
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Kieran Huggins wrote:this is just begging for jQuery!!!!!!!!!
Yeah sure.

Anyways I found out what the problem was. According to Wikipedia:
Reusing XMLHttpRequest Object in IE

In IE, if the open method is called after setting the onreadystatechange callback, there will be a problem when trying to reuse the XHR object. To be able to reuse the XHR object properly, use the open method first and set onreadystatechange later. This happens because IE resets the object implicitly in the open method if the status is 'completed'. For more explanation of reuse: Reusing XMLHttpRequest Object in IE.. The downside to calling the open method after setting the callback is a loss of cross-browser support for readystates. See the quirksmode article.
So I simple placed the onreadystatechange callback after the open() method.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Hey kieran, I had heard of jquery on these forums and various other places, but I never really bothered to read up on it until you posted that code in my other thread. WOW! Jquery makes me actually like javascript. It's the best javascript library I've ever seen easily. Go JQuery!

EDIT: Well I guess it's more of a framework than a library, but anyway... it's awesome. :D
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

The Ninja Space Goat wrote:Hey kieran, I had heard of jquery on these forums and various other places, but I never really bothered to read up on it until you posted that code in my other thread. WOW! Jquery makes me actually like javascript. It's the best javascript library I've ever seen easily. Go JQuery!

EDIT: Well I guess it's more of a framework than a library, but anyway... it's awesome. :D
Yeah same here. I thought it to be more like Dojo but damn was I WRONG!
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post by Buddha443556 »

The Ninja Space Goat wrote:WOW! Jquery makes me actually like javascript.
I'm still not fond of Javascript but using jQuery leaves me plenty of time to tackle other Javascript problems.

I would recommend the downloading SVN which is setup to pack the jQuery with a little tweeking you can add your own js files to the MAKEFILE too.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

Javascript is a very beautiful and flexible language, but it doesn't seem like it was really designed with web-scripting or the DOM in mind.

That's where jQuery steps in. It's simple straight-forward "find things and do stuff" philosophy has really made my javascript work much easier.

Since I've found it, I've re-written many behaviours that I'd written previously, often shortening them from 100+ lines of code to less than 10...even with good formatting! I even find jQuery more readable than the regular javascript DOM sit-ups. And it seems faster to boot!

In fact - It shall henceforth be tacked on to my signature.

Kieran <3 jQuery ;-)
Post Reply