mlse
03-29-2008, 06:35 PM
Hi all,
I've writtena test piece of code that uses AJAX. It works just fine in every browser apart from IE (now why am I not surprised!!).
There is a form into which you have to type the correct day of the week and then click "submit". The AJAX is used to check that you have entered the correct day of the week and if so the form is submitted (simple!). The parts of the code are given below. I appreciate that I probably don't need to post everything here, but feel free to do a copy-and-paste and try it out for yourself and see how it doesn't work properly in IE! In IE, what happens is the PHP code is called on the first button click, but subsequent button clicks do nothing - do I need to reset the HTTP object or something like that, given that it is a different class instance in IE as compared to other browsers?
The HTML (filename is "scratch.html"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"></meta>
<title>Scratch</title>
<script language="JavaScript" type="text/javascript" src="scratch.js"></script>
</head>
<body>
<form name="myForm" method="POST" action="scratch.php">
<span>What day of the week is it? </span><input name="dayofweek" type="text" />
<input type="button" value="submit" onclick="validate();"/>
</form>
</body>
</html>
The Javascript (filename is "scratch.js"):
var HTTP;
try {
// Firefox, Opera 8.0+, Safari
HTTP = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer (instrument of the devil).
try {
HTTP = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
HTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
}
}
}
function validate()
{
HTTP.onreadystatechange = function()
{
if (HTTP.readyState == 4)
{
if (HTTP.responseText == "no")
{
document.myForm.dayofweek.style.border = "1px solid #F00";
document.myForm.dayofweek.style.background = "#FDD";
alert("That's wrong! Please try again.");
}
else if (HTTP.responseText == "yes")
{
document.myForm.submit();
}
}
}
HTTP.open("GET","scratch.php?callfunc=checkdayofweek&dayofweek="+document.myForm.dayofweek.value,true);
HTTP.send(null);
}
And the PHP (filename is "scratch.php"):
<?php
function checkdayofweek()
{
return ((strtolower(date("D")) === strtolower($_REQUEST["dayofweek"]) ||
strtolower(date("l")) === strtolower($_REQUEST["dayofweek"]))
? "yes"
: "no");
}
if (isset($_REQUEST["callfunc"]))
{
$function = $_REQUEST["callfunc"];
$printval = $function();
}
else
{
$printval = "That's right!";
}
echo $printval;
?>
I've writtena test piece of code that uses AJAX. It works just fine in every browser apart from IE (now why am I not surprised!!).
There is a form into which you have to type the correct day of the week and then click "submit". The AJAX is used to check that you have entered the correct day of the week and if so the form is submitted (simple!). The parts of the code are given below. I appreciate that I probably don't need to post everything here, but feel free to do a copy-and-paste and try it out for yourself and see how it doesn't work properly in IE! In IE, what happens is the PHP code is called on the first button click, but subsequent button clicks do nothing - do I need to reset the HTTP object or something like that, given that it is a different class instance in IE as compared to other browsers?
The HTML (filename is "scratch.html"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"></meta>
<title>Scratch</title>
<script language="JavaScript" type="text/javascript" src="scratch.js"></script>
</head>
<body>
<form name="myForm" method="POST" action="scratch.php">
<span>What day of the week is it? </span><input name="dayofweek" type="text" />
<input type="button" value="submit" onclick="validate();"/>
</form>
</body>
</html>
The Javascript (filename is "scratch.js"):
var HTTP;
try {
// Firefox, Opera 8.0+, Safari
HTTP = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer (instrument of the devil).
try {
HTTP = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
HTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
}
}
}
function validate()
{
HTTP.onreadystatechange = function()
{
if (HTTP.readyState == 4)
{
if (HTTP.responseText == "no")
{
document.myForm.dayofweek.style.border = "1px solid #F00";
document.myForm.dayofweek.style.background = "#FDD";
alert("That's wrong! Please try again.");
}
else if (HTTP.responseText == "yes")
{
document.myForm.submit();
}
}
}
HTTP.open("GET","scratch.php?callfunc=checkdayofweek&dayofweek="+document.myForm.dayofweek.value,true);
HTTP.send(null);
}
And the PHP (filename is "scratch.php"):
<?php
function checkdayofweek()
{
return ((strtolower(date("D")) === strtolower($_REQUEST["dayofweek"]) ||
strtolower(date("l")) === strtolower($_REQUEST["dayofweek"]))
? "yes"
: "no");
}
if (isset($_REQUEST["callfunc"]))
{
$function = $_REQUEST["callfunc"];
$printval = $function();
}
else
{
$printval = "That's right!";
}
echo $printval;
?>