Hi, I am getting different behaviors in FF and IE when I ran following code. Please help.
expect behavior:
when you select an item from the first drop down menu, (use ajax request method to send the id var value to a php script) hance, displays a second drop down meun and populates the list.
the code is working in FF, but it breaks in IE
---------------------
html code:
---------------------
<html>
<head><title>test ajax</title>
<SCRIPT type="text/javascript">
<!--
//cat to sub cat
//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 ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var cat=document.getElementById('cat').value;
var url="ajax-sub_cat.php";
var queryString="?cat="+cat;
url=url+queryString;
ajaxRequest.open("GET",url,true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<p> test page</p>
<p>select category
<select id='cat' name='cat' onChange="ajaxFunction()" >
<option>sale</option>
<option>service</option>
<option>barter</option>
</select>
<div id='ajaxDiv'>Sub Category</div>
</p>
</body>
</html>
------------------------------
php (ajax-sub_cat.php)
------------------------------
<?php
header("Cache-Control: no-cache, must-revalidate");
//*****call db with out pear
require ("database/library/db_configs/dbconfig.php");
require ("database/library/db_configs/dbconnect.php");
// Retrieve data from Query String
$getCat=$_GET["cat"];
echo "selected cat: ". $getCat . "<br />";
$display_string = null;
//build query
$query = "SELECT cat_sub_category FROM ca_ads_categories WHERE cat_category = '$getCat'";
$sqlResult=mysql_query($query);
$countRow=mysql_num_rows($sqlResult);
// Insert a new row in the table for each person returned
echo "<select id='sub_cat' name='sub_cat'>";
for($i=0; $i<$countRow; $i++){
$row=mysql_fetch_object($sqlResult);
//+++$row=$sqlResult->fetchRow();
echo "<OPTION>$row->cat_sub_category</OPTION>";
}
echo "</select>";
echo $display_string;
?>
expect behavior:
when you select an item from the first drop down menu, (use ajax request method to send the id var value to a php script) hance, displays a second drop down meun and populates the list.
the code is working in FF, but it breaks in IE
---------------------
html code:
---------------------
<html>
<head><title>test ajax</title>
<SCRIPT type="text/javascript">
<!--
//cat to sub cat
//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 ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var cat=document.getElementById('cat').value;
var url="ajax-sub_cat.php";
var queryString="?cat="+cat;
url=url+queryString;
ajaxRequest.open("GET",url,true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<p> test page</p>
<p>select category
<select id='cat' name='cat' onChange="ajaxFunction()" >
<option>sale</option>
<option>service</option>
<option>barter</option>
</select>
<div id='ajaxDiv'>Sub Category</div>
</p>
</body>
</html>
------------------------------
php (ajax-sub_cat.php)
------------------------------
<?php
header("Cache-Control: no-cache, must-revalidate");
//*****call db with out pear
require ("database/library/db_configs/dbconfig.php");
require ("database/library/db_configs/dbconnect.php");
// Retrieve data from Query String
$getCat=$_GET["cat"];
echo "selected cat: ". $getCat . "<br />";
$display_string = null;
//build query
$query = "SELECT cat_sub_category FROM ca_ads_categories WHERE cat_category = '$getCat'";
$sqlResult=mysql_query($query);
$countRow=mysql_num_rows($sqlResult);
// Insert a new row in the table for each person returned
echo "<select id='sub_cat' name='sub_cat'>";
for($i=0; $i<$countRow; $i++){
$row=mysql_fetch_object($sqlResult);
//+++$row=$sqlResult->fetchRow();
echo "<OPTION>$row->cat_sub_category</OPTION>";
}
echo "</select>";
echo $display_string;
?>
