Empty drop-down boxes...
Posted: Wed Jun 07, 2006 4:33 am
Hello people!
Okay, so i have this "index.php" page where in i load "cats.php" inside a div layer using AJAX.
The "cats.php" page basically retrieves categories and subcategories from a mysql database and outputs them in a 2 level hierarchy of drop down boxes.
So when someone selects a category, the subcategory dropdown automatically populates itself with respective values of that category. I have done this using a javascript and the code ABSOLUTELY WORKS FINE when i directly run "cats.php" or when i use in my index file.
But the problem is, when i try and load it in the index page div layer through an AJAX call, i just see the dropdown boxes as empty...
My AJAX function works absolutely fine too! It can load other pages perfectly! Dunno what the problem is...
Below is the code for my "cats.php" file...
And the code for my "index.php" file goes as below :-
Any takes???
Okay, so i have this "index.php" page where in i load "cats.php" inside a div layer using AJAX.
The "cats.php" page basically retrieves categories and subcategories from a mysql database and outputs them in a 2 level hierarchy of drop down boxes.
So when someone selects a category, the subcategory dropdown automatically populates itself with respective values of that category. I have done this using a javascript and the code ABSOLUTELY WORKS FINE when i directly run "cats.php" or when i use
Code: Select all
<?php include "cats.php" ?>But the problem is, when i try and load it in the index page div layer through an AJAX call, i just see the dropdown boxes as empty...
My AJAX function works absolutely fine too! It can load other pages perfectly! Dunno what the problem is...
Below is the code for my "cats.php" file...
Code: Select all
<?php
include "globals.php";
$connect = mysql_pconnect ($db_host, $db_username, $db_password);
mysql_select_db ($db_name);
?>
Category: <select name="category" style="width:150" onChange="redirect(this.options.selectedIndex)"></select>
Sub Category: <select name="subcat" style="width:150"></select>
<script language="javascript">
var category = document.getElementById("category");
var subcat = document.getElementById("subcat");
category.options[0] = new Option ('None');
subcat.options[0] = new Option ('None');
<?php
$cat = "select distinct category from cat_subcat order by category";
$cat_result = mysql_query ($cat);
$i=1;
while ($row_cat = mysql_fetch_assoc($cat_result))
{
echo "category.options[".$i."] = new Option ('".$row_cat['category']."')\n";
$myarr[$i-1] = $row_cat['category'];
$i++;
}
$k=1;
?>
var groups=category.options.length
var group=new Array(groups)
group[0]=new Array()
group[0][0]=new Option("None","")
for (i=1; i<groups; i++)
{
group[i]=new Array()
}
<?php
for ($j=0; $j < count($myarr); $j++)
{
$l=1;
echo "group[".$k."][0] = new Option ('None');\n";
$scat = "select distinct subcategory from cat_subcat where category like '".$myarr[$j]."' order by subcategory";
$scat_result = mysql_query ($scat);
while ($row_scat = mysql_fetch_assoc($scat_result))
{
echo "group[".$k."][".$l."] = new Option ('".$row_scat['subcategory']."', '')\n";
$l++;
}
$k++;
}
?>
var temp=subcat
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function resetform(x)
{
document.myform.reset();
}
</script>
<?php mysql_close(); ?>Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hi</title>
<script type="text/javascript">
var xhr = new Array();
var xi = new Array(0); // ARRAY OF XML-HTTP REQUEST INDEXES
xi[0] = 1; // FIRST INDEX SET TO 1 MAKING IT AVAILABLE
function xhrRequest(type)
{
if (!type)
{
type = 'html';
}
// xhrsend IS THE xi POSITION THAT GETS PASSED BACK
// INITIALIZED TO THE LENGTH OF THE ARRAY(LAST POSITION + 1)
// IN CASE A FREE RESOURCE ISN'T FOUND IN THE LOOP
var xhrsend = xi.length;
// GO THROUGH AVAILABLE xi VALUES
for (var i=0; i<xi.length; i++)
{
// IF IT'S 1 (AVAILABLE), ALLOCATE IT FOR USE AND BREAK
if (xi[i] == 1)
{
xi[i] = 0;
xhrsend = i;
break;
}
}
// SET TO 0 SINCE IT'S NOW ALLOCATED FOR USE
xi[xhrsend] = 0;
// SET UP THE REQUEST
if (window.ActiveXObject)
{
try
{
xhr[xhrsend] = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xhr[xhrsend] = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
else if (window.XMLHttpRequest)
{
xhr[xhrsend] = new XMLHttpRequest();
if (xhr[xhrsend].overrideMimeType)
{
xhr[xhrsend].overrideMimeType('text/' + type);
}
}
return (xhrsend);
}
function clear_div (divlay)
{
document.getElementById(divlay).innerHTML = "";
}
function fcn(url, reqType, divlay)
{
document.getElementById(divlay).innerHTML = "<div align='center'><font size='1' face='Trebuchet MS' color='#777777'>Loading Image...</font><br><br><img src='1.gif'></div>";
var xhri = xhrRequest(reqType);
url = url + "&ms=" + new Date().getTime();
xhr[xhri].open('GET', url, true);
xhr[xhri].onreadystatechange = function()
{
if (xhr[xhri].readyState == 4 && xhr[xhri].status == 200)
{
document.getElementById(divlay).innerHTML = xhr[xhri].responseText;
xi[xhri] = 1;
xhr[xhri] = null;
}
};
xhr[xhri].send(null);
}
function start()
{
fcn('cats.php?', '','cats');
}
</script>
</head>
<body onload="start()">
<center><br />
<div align="center" id="cats"></div></center>
</body>
</html>