I have this PHP code which calls several dropdown menus. These menus are nearly identical except each menu queries a sql database with the paramters set by all the previous (Make, Model, Year, Size) down the line. This code works in Chrome and FF, but in IE the default drop down (Make) is there, and the first dropdown (Model) gets called- but the subsequent dropdowns (Year and Size) do not.
I read somewhere that Microsoft acknowledged some error in how Ajax responds to select menus but has no intention of rectifying it or providing a workaround and I'm not sure how to fix this without rewriting it all to be compatible. Help?
The Page code for calling the Functions:
function ajaxFunction1(fld, val){
//document.getElementById('details').innerHTML="";
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
document.getElementById('processing1').style.display="inline";
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('Mod');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
document.getElementById('processing1').style.display="none";
}
}
var fld = fld;
var val = val;
var queryString = "?fld=" +encodeURIComponent(fld)+ "&val=" +encodeURIComponent(val);
ajaxRequest.open("GET", "dropdownmodel.php" + queryString, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(null);
}
/* ----------------------- --------------------------------------- ------------------------- */
function ajaxFunction2(md){
var mk = document.getElementById('Make').value;
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
document.getElementById('processing2').style.display="inline";
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('Yr');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
document.getElementById('processing2').style.display="none";
}
}
var md = md;
var queryString = "?mk=" +encodeURIComponent(mk)+ "&md=" +encodeURIComponent(md);
ajaxRequest.open("POST", "dropdownyear.php" + queryString, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(null);
}
function ajaxFunction3(yr){
var mk = document.getElementById('Make').value;
var md = document.getElementById('Model').value;
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
document.getElementById('processing3').style.display="inline";
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('Len');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
document.getElementById('processing3').style.display="none";
}
}
var md = md;
var mk = mk;
var queryString = "?mk=" +encodeURIComponent(mk)+ "&md=" +encodeURIComponent(md)+ "&yr=" +encodeURIComponent(yr);
ajaxRequest.open("GET", "dropdownsize.php" + queryString, true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(null);
}Here are the functions:
dropdownmodel.php:
<?php
include "inc_connection.php";
$fld = $_REQUEST['fld'];
$val = $_REQUEST['val'];
if(isset($val) && !empty($val))
{
$query = "select distinct(Model) as 'Model' from product_details where Make='$val';";
$result= mysql_query($query);
while($row=mysql_fetch_array($result))
{
$Mod = $row['Model'];
$opt = "<option name=$Mod>$Mod</option>";
}
echo "<select name='SelectModelDropDownList' class='formInputText' style='height:20px;width:250px;font-family:Arial, Helvetica, sans-serif; font-size:12px;' id='Model' onChange='ajaxFunction2(this.value);'>";
echo "<option value='0'>--Select Model--</option>";
echo "$opt";
echo "</select>";
}
else
{
echo "";
}
?>dropdownyear
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<?php
include "inc_connection.php";
$mk = $_REQUEST['mk'];
$md = $_REQUEST['md'];
if(isset($mk) && isset($md) && !empty($mk) && !empty($md))
{
$query = "select distinct(Year) as 'Ye' from product_details where Make='$mk' and Model='$md';";
$result= mysql_query($query);
echo "<select name='SelectYearDropDownList' class='formInputText' style='height:20px;width:250px;font-family:Arial, Helvetica, sans-serif; font-size:12px;' id='Year' onChange='ajaxFunction3(this.value);'>";
echo "<option value='0'>--Select Year--</option>";
while($row=mysql_fetch_array($result))
{
$yr = $row['Ye'];
echo "<option name=$yr>$yr</option>";
}
echo "</select>";
}
else
{
echo "";
}
?>dropdownsize
<?php
include "inc_connection.php";
$mk = $_REQUEST['mk'];
$md = $_REQUEST['md'];
$yr = $_REQUEST['yr'];
if(isset($mk) && isset($md) && !empty($mk) && !empty($md) && isset($yr) && !empty($yr))
{
$query = "SELECT DISTINCT(Size), ROUND( (Size /12), 2 ) AS 'Sz', Description FROM product_details where Make='$mk' and Model='$md' and Year='$yr';";
$result= mysql_query($query);
echo "<select name='SelectBedLengthDropDownList' class='formInputText' style='height:20px;width:250px;font-family:Arial, Helvetica, sans-serif; font-size:12px;' id='Length'>";
echo "<option value='0'>--Select Bed Length--</option>";
while($row=mysql_fetch_array($result))
{
$sz = $row['Sz'];
$Description = $row['Description'];
echo "<option name=$sz>".$sz ." feet ".'('.$Description.')'."</option>";
}
echo "</select>";
}
else
{
echo "";
}
?>