First off: validate your html code! There are lots of errors, and while a validator report things that will still (probably) work in browsers, there is no guarantee that it will still work in a new browser, and it also becomes a true pain to find a validation error that does break things when you have to wade through heaps of other issues: html validator
And among lots of things that are low risk, you really do have some that are highly likely to break functionality.
Once that dealt with, you should start by having a look at the select element for products
<select...>
<script type="text/javascript">
/* do stuff that alters the containing select element... which has not been finished yet!
I'd assume that document.write() is the only safe option to add things to the select
at this point. */
</script>
</select>
<script type="text/javascript">
/* now that the select element above has been finished, you could safely use getElementById etc */
</script>
F12 starts the IE8 debugger. Click "script" button, then "start debugging" button, and reload page. You will see something like "object expected" and "showProducts()" is highlited. IE8 would probably highlight something within the function if there was something wrong inside of it, but if you don't know this for sure you could always
function showProducts() {
alert('showProducts');
return;
}
Assuming you mange to make no errors on two simple lines of code, this should not fail. But the IE debugger still has problems. So, it would seem the function is not defined (and yes, "call to undefined function" would make more sense to me, even though everything in javascript is an object).
And if the function isn't defined, there should either be a parse error in the js file that makes it impossible for IE to get through it (unlikely or you would have had another error reported earlier), or the javascript was never loaded. It may fail to load due to incorrect spelling of filename, which has to be checked. Assuming that is correct, the erroneous IE-specific if-tag has to be corrected (as well as properly hidden with a comment, so it does not break validation!)
But since you could not juse make the whole script element be inside a comment, this is not as straightforward as one would like... so better yet, why not simply remove it? The code inside this file seem to be dealing with IE6 (comment about IE5 in there as well, but supporting 5 is just plain silly), at least when it comes to creating an xmlhttprequest object, while the intent of your if-check (supposedly, since it isn't correct), is to not load the javascript file for IE7 or earlier versions. And even if the javascript code breaks for IE7 or earlier, what's the difference from not having it at all? Your page won't work without javascript anyway.
Once that is corrected and IE8 no longer reports an error, and the function call works and you get a response from the server, but still see no options in the select box, you should try to find out why.
For example
<script type="text/javascript">
//Ajax Http request function
function loadScript(url,cfunc){
xmlhttp = {
readyState: 4,
status: 200,
responseText: '<option value="1">Pool One</option><option value="2">Pool 2</option>'
};
return cfunc(xmlhttp);
}
//function to set and display Products
function showProducts(str){
if (str==""){
document.getElementById("Products").innerHTML="";
alert('empty string');
return;
}
loadScript("ProductList.php?Products="+str,function(xmlhttp){
alert((xmlhttp.readyState == 4) + "\n" + (xmlhttp.status == 200));
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var s = document.getElementById("Products");
s.innerHTML=xmlhttp.responseText;
alert('added ' + xmlhttp.responseText + ' to ' + s);
}
});
}
//Function to set and display Sizes
function showPoolSize(str){
if (str==""){
document.getElementById("size").innerHTML="";
return;
}
loadScript("selectSize.php?Pool_Shape="+str,function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("size").innerHTML=xmlhttp.responseText;
}
document.getElementById('_Shapes').style.display = 'block';
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<select id="Products"></select>
<script type="text/javascript">
showProducts();
</script>
</body>
will show you that selectElement.innerHTML = 'valid string with options' won't work (in IE8 anyway). There are various problems with innerHTML which is why I stay away from it and manipulate the DOM tree directly instead.
Once you had your script properly included, it was perhaps overkill to replace the ajax request with a mock object, but this is were I actually started looking for bugs...
To avoid the use of innerHTML:
- Change the php script that handles the call to get pool products.
/* Previously a string like this was returned (or so I guess) */
# echo '<option value="1">Pool 1</option>...';
/* Insread, we'll return something which can easily be used with document.createElement */
$pools = array(
array('id' => 1, name => 'Pool One'),
array('id' => 2, name => 'Pool 2')
);
echo json_encode($pools);
2. and then, instead of innerHTML = ... loadScript("a_test.php?Products="+str,function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var d = document;
var s = d.getElementById('Products');
var pools = eval(xmlhttp.responseText);
for (var i = 0; i < pools.length; ++i) {
var o = d.createElement('option');
o.value = pools[i].id;
var text = d.createTextNode(pools[i].name);
o.appendChild(text);
s.appendChild(o);
}
}
});
