|
|
Displaying linked records of a categoryLike dependant two list boxes we will develop one application in which we will select a category in 1st drop down list box and then all the records of this category will be displayed.
In our example we have taken continents and countries. If we are selecting Europe from the drop down list then all the countries of Europe will be displayed. Here we have restricted to 6 countries for each continent.
Once the page loads we have shown all the records of all categories and then we can narrow down this record by selecting one continent from the drop down list box.
We have used GET method of posting form data to PHP script. This PHP script receives the cat_id by GET method and returns with all the records having that cat_id. If the cat_id is equal to zero ( no particular selection ) then all records are displayed.
Here is the DEMO of this script.
<html>
<head>
<script type="text/javascript">
function ajaxFunction()
{
//document.writeln(val)
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged(){
if(httpxml.readyState==4){
var myObject = eval('(' + httpxml.responseText + ')');
//var myObject = httpxml.responseText;
//document.getElementById("display").innerHTML=myObject;
var msg=myObject.value[0].message;
if(msg.length > 0){document.getElementById("msg").innerHTML=msg;}
else{document.getElementById("msg").style.display='none';}
var str="<table width='50%' bgcolor='#ffffff' align=center><tr><th>ID</th><th>Name</th></tr>";
var color="#f1f1f1";
for(i=0;i<myObject.data.length;i++)
{
if((i%2)==0){color="#ffffff";}
else{color="#f1f1f1";}
str = str + "<tr bgcolor="+color+"><td>" + myObject.data[i].subcat_id + " </td><td>"+ myObject.data[i].subcat_name + "</a></td></tr>"
}
str = str + "</table>" ;
document.getElementById("display").innerHTML=str;
}
}
var url="subcat2.php";
var cat_id=document.myForm.cat_id.value;
url=url+"?cat_id="+cat_id;
url=url+"&kid="+Math.random();
//alert(url)
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
// document.getElementById("display").innerHTML="Please Wait....";
document.getElementById("msg").style.background='#f1f1f1';
document.getElementById("msg").innerHTML="Please Wait ... ";
document.getElementById("msg").style.display='inline';
}
</script>
<?php
require "z_db.php";
echo "</head><body onload="ajaxFunction()";>";
echo "<center><table border='0' width='100%' cellspacing='0' cellpadding='0' > <tr bgcolor='#ffffcc'><form name=myForm method='post' onSubmit="ajaxFunction(this.form); return false">
<td align='center' colspan=2><font face='verdana, arial, helvetica' size='2' ><b> Select a Category</b> </font></td></tr>";
echo "<tr>";
echo "<td align='center'>";
$query="SELECT * FROM plus2_cat order by cat_name";
$result=mysql_query($query);
echo mysql_error();
echo "<select name=cat_id onChange="ajaxFunction()"><option value=0>Show All</option>";
while($nt=mysql_fetch_array($result)){
echo "<option value=$nt[cat_id]>$nt[cat_name]</option>";
}
echo "</select>";
echo "</font></td>";
echo "</tr></form>";
echo "</table>";
?>
<div id=msg style="position:absolute; z-index:1; left: 1100px; top: 0px;" >This is message area</div>
<div id="display"><b>Records will be displayed here</b></div>
</body>
</html>
The PHP script doing all the datbase management is here.
////// Your Database Details here /////////
require "z_db.php"; //Your database details here
//////////////////////////// Main Code sarts ///////////////
$cat_id=$_GET['cat_id'];
//$cat_id=11;
if(!is_numeric($cat_id)){
$message.="Data Error |";
exit;
}
//$message.=" :Status = $status";
if($cat_id>0){
$q=mysql_query("select subcat_id, subcat_name from plus2_subcat where cat_id=$cat_id order by subcat_name");
}else{
$q=mysql_query("select subcat_id, subcat_name from plus2_subcat order by subcat_name ");
$cat_id=0;
}
//$message .=" Cat_id=$cat_id ";
$message .= mysql_error();
$str= "{ "data" : [ ";
while($nt=mysql_fetch_array($q)){
$str=$str."{"subcat_id" : "$nt[subcat_id]", "subcat_name" : "$nt[subcat_name]"},";
//$str=$str."{"myclass" : "$nt[class]"},";
}
$str=substr($str,0,(strLen($str)-1));
$message=$message. " Records displayed";
$str=$str."],"value" : [{"cat_id" : $cat_id,"message" : "$message"}]}";
//echo json_encode($str);
echo $str;
The dump file to create MySQL tables is here.
|
| |
|
|
|
|
|
