Empty drop-down boxes...

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
akash_bhavsar
Forum Newbie
Posts: 2
Joined: Wed Jun 07, 2006 4:29 am

Empty drop-down boxes...

Post by akash_bhavsar »

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

Code: Select all

<?php include "cats.php" ?>
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...

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>
&nbsp;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(); ?>
And the code for my "index.php" file goes as below :-

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>
Any takes???
akash_bhavsar
Forum Newbie
Posts: 2
Joined: Wed Jun 07, 2006 4:29 am

Post by akash_bhavsar »

Helllppppp! Anyone please try to figure out what's goin on with my script! I'm annoyed as hell now!!! :cry:
Post Reply