Anyone, Anyone, Bueller, Bueller ......

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
zooropa
Forum Newbie
Posts: 6
Joined: Wed May 26, 2010 1:40 pm

Anyone, Anyone, Bueller, Bueller ......

Post by zooropa »

Can anyone provide code snippets for cascading dropdowns (2 off) so that when item e.g. Fruit is selected in the first dropdown, the items e.g. Bananas, Apples appear in the second dropdown without the page refreshing. I'd be eternally greatful as i've been stuck on this for weeks, Thanks Mark
internet-solution
Forum Contributor
Posts: 220
Joined: Thu May 27, 2010 6:27 am
Location: UK

Re: Anyone, Anyone, Bueller, Bueller ......

Post by internet-solution »

I am assuming you are aware of ajax calls. See the example below for two files which I used to develop an advanced staff search based on four criteria in drop down boxes. The dropdown boxes interact with each other to show the relevant items only. For example if Bristol office only has staff from skill group 1 and 3 then only these two items are shown in skill group drop down list.

I am just adding the code, if time permits I will add some comments:

First file PHP - staffSearchAdvanced.php - this shows the drop downs

Code: Select all

<?php
	session_start();
	include "../library/commonFunctions.inc.php";
	include "../library/config.inc.php";
	include "../staff/staffFunctions.inc.php";

	$title="Advanced staff search";
	addHeader($title,-1);

	$GroupName="--";

	$fieldText=array('Office','Skill group','Resource manager','Team leader');
	$fieldValue=array('Location','Skill','GroupName','TL');
		echo"<h4>Advanced search<img src='$infoButtonImage' title='Select a name from the drop down menu'></H4>
			<form  name=filter method=get>
			<table><tr><td width=25%>Filter criteria<td width=25%>Value";

		if(isset($_REQUEST['btnSearch'])) //if search button is pressed
		{
			$fieldsEncoded=$_REQUEST['fields'];
			$valuesEncoded=$_REQUEST['values'];

			$fieldArray=explode(",",urldecode($fieldsEncoded));
			$valueArray=explode(",",urldecode($valuesEncoded));
			//writing the first select box
			echo"	<tr><td><select name=fieldName onchange='javascript:fieldChanged(0)'><option value=0>--</option>";
			for ($i=0;$i<4;$i++)
			{
				$selected="";
				if ($fieldValue[$i]==$fieldArray[0])
					$selected="selected";
				echo"<option $selected value='$fieldValue[$i]'>$fieldText[$i]</option>";
			}
			echo"</select>";
			echo"<td><span name=filterSelection id=filterSelection0><select name=value onchange='javascript:fieldChanged(0)'>";
			selectOptions("tblstaff",$valueArray[0],$fieldArray[0],1);
			echo"</span>";
			for ($i=1;$i<4;$i++)
			{
				for ($j=0;$j<count($fieldArray);$j++)

				{
					if($j<$i)
					{
						$whereClause_j="[$fieldArray[$j]] like '$valueArray[$j]'";
						if($whereClause=="")
							$whereClause=" where $whereClause_j";
						else
							$whereClause.=" and $whereClause_j";
					}
				}
				echo"<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged($i)'><option value=0>--</option></select>";
				echo"<td><span name=filterSelection id=filterSelection{$i}><select name=value onchange='javascript:fieldChanged($i)'>";
				if(isset($valueArray[$i]))
					selectOptions("tblstaff",$valueArray[$i],$fieldArray[$i],1,$whereClause);
				echo"</select></span>";
			}
			echo"</table></form>";
		}
		else
		{
			$fieldArray=array('0','0','0','0');
			$fieldsEncoded='0,0,0,0';
			$valueArray=array("%","%","%","%");
			$valuesEncoded="%,%,%,%";
			echo"	<tr><td><select name=fieldName onchange='javascript:fieldChanged(0)'>
						<option value=0>--</option>
						<option value=Location>Office</option>
						<option value=Skill>Skill group</option>
						<option value=GroupName>Resource manager</option>
						<option value=TL>Team leader</option>
				</select>
				<td><span name=filterSelection id=filterSelection0>
					<select disabled name=value onchange='javascript:fieldChanged(0)'>
						<option value='%'>[no selection]</option>
					</select>
				</span>

				<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(1)'><option value=0>--</option></select>
				<td><span name=filterSelection id=filterSelection1 ><select disabled name=value onchange='javascript:fieldChanged(1)'><option value='%'>[no selection]</option></select></span>

				<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(2)'><option value=0>--</option></select>
				<td><span name=filterSelection id=filterSelection2><select disabled name=value onchange='javascript:fieldChanged(2)'><option value='%'>[no selection]</option></select></span>

				<tr><td><select disabled name=fieldName onchange='javascript:fieldChanged(3)'><option value=0>--</option></select>
				<td><span name=filterSelection id=filterSelection3><select disabled name=value onchange='javascript:fieldChanged(3)'><option value='%'>[no selection]</option></select></span>
			</table></span></form>";
		}
		echo"<form name=search method=post>
		<input type=hidden name='fields' value='$fieldsEncoded' />
		<input type=hidden name='values' value='$valuesEncoded' />
		<input type=submit name='btnSearch' value='Show staff' />

		</form>
		<div id='staffList'>";
		if(isset($_REQUEST['btnSearch']))
		{
			$whereClause="";
			for ($j=0;$j<count($fieldArray);$j++)
			{
					$whereClause_j=("[$fieldArray[$j]] like \"$valueArray[$j]\"");
					if($whereClause=="")
						$whereClause=" where $whereClause_j";
					else
						$whereClause.=" and $whereClause_j";
			}
			writeStaffTableTopLinks("whereClause",$whereClause);
			//writeStaffTable("whereClause",$whereClause);
?>
			<div id='staffList'></div>
<?php
			$whereClause=urlencode($whereClause);
			echo "<input id=rm type=hidden value='$whereClause' />";
		}
		echo"</div>";
?>
<script type=text/javascript>
var xmlHttp=null;
	function fieldChanged(myID)
	{
		//alert (myID)
		fieldObj=document.filter.fieldName;
		valueObj=document.filter.value;

		var vFieldNames="";
		var vFieldValues="";
		//for(i=myID+1;i<fieldObj.length;i++)
		for(i=1;i<fieldObj.length;i++)
		{
			if(i>myID)
			{
				valueObj[i].selectedIndex=0;
				//valueObj[i].disabled = true;
				fieldObj[i].selectedIndex=0;
			}
			if(valueObj[i-1].value !='%' )
			{
				fieldObj[i].disabled=false;

				k=1;
				for(j=1;j<fieldObj[i-1].options.length;j++)
				{
					if(fieldObj[i-1].value != fieldObj[i-1].options[j].value)
					{
						elOptNew = document.createElement('option');
						fieldObj[i].add(elOptNew);
						fieldObj[i].options[k].text=fieldObj[i-1].options[j].text;
						fieldObj[i].options[k].value=fieldObj[i-1].options[j].value;
						k++;
					}
				}
			}
			else
			{
				fieldObj[i].selectedIndex=0;
				fieldObj[i].disabled=true;
			}

		}
		for(i=0;i<fieldObj.length;i++)
		{
			if(fieldObj[i].value==0)
				valueObj[i].disabled=true;
			else
				valueObj[i].disabled=false;

			for(j=1;j<fieldObj[i].options.length;j++)
			if(fieldObj[i].options[j].text=="")
			{
				fieldObj[i].remove(j);
				j--;
			}
		}
		populateValues(myID,1);

	}

	window.onload=function ()
	{
		fieldObj=document.filter.fieldName;
		valueObj=document.filter.value;
		var vFieldNames=unescape(document.search.fields.value).split(",");
		var vFieldValues=unescape(document.search.values.value).split(",");

		fieldObj[0].value=vFieldNames[0];
		valueObj[0].value=vFieldValues[0];

		for(i=1;i<vFieldNames.length+1;i++)
		{
			if(vFieldValues[i-1] !='%' )
			{
				fieldObj[i].disabled=false;
				k=1;
				for(j=1;j<fieldObj[i-1].options.length;j++)
				{
					if(fieldObj[i-1].value != fieldObj[i-1].options[j].value)
					{
						elOptNew = document.createElement('option');
						fieldObj[i].add(elOptNew);
						fieldObj[i].options[k].text=fieldObj[i-1].options[j].text;
						fieldObj[i].options[k].value=fieldObj[i-1].options[j].value;
						k++;
					}
				}
				fieldObj[i].value=vFieldNames[i];
				valueObj[i].value=vFieldValues[i];
			}
			else
			{
				fieldObj[i].selectedIndex=0;
				fieldObj[i].disabled=true;
			}
			if(fieldObj[i].value==0)
				valueObj[i].disabled=true;
			else
				valueObj[i].disabled=false;
		}
	}

function populateValues(id,refresh)
{	
	idGlobal=id;
	fieldObj=document.filter.fieldName;
	valueObj=document.filter.value;
	
	if(refresh)
	{
		var listObj=document.getElementById("staffList");
		listObj.innerHTML="";
		var fields=fieldObj[0].value
		var values=valueObj[0].value;
		for (i=1;i<4;i++)
		{	
			if(fieldObj[i].value!=0)
			{
				fields=fields+","+fieldObj[i].value
				values=values+","+valueObj[i].value;
			}
		}
		document.search.fields.value=escape(fields);
		document.search.values.value=escape(values);	
	}
	else
	{
		fields=document.search.fields.value;
		values=document.search.values.value;
	}
	arg="?fields="+escape(fields)+"&values="+escape(values);
	xmlHttp=GetXmlHttpObject();
	var url="staffSearchAdvanced.ajax.php"
	url=url+arg+"&id="+id+"&sid="+Math.random();
	xmlHttp.onreadystatechange=valueChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	return xmlHttp;
}


function valueChanged()
{
	var idINT=parseInt(idGlobal);
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
	{
		
		var spanObj=document.getElementById("filterSelection"+idINT);
		spanObj.innerHTML=xmlHttp.responseText;
	}
}

	
	


function GetXmlHttpObject()
{
	var xmlHttp=null;
	try
	{
		 // Firefox, Opera 8.0+, Safari
		 xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		 //Internet Explorer
		 try
	  	{
	  		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	  	}
	 	catch (e)
	  	{
	  		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	  	}
	}
	return xmlHttp;
}


</script>
Second file - staffSearchAdvanced.ajax.php - handles ajax requests from javascript

Code: Select all

<?php
	session_start();
	include "../library/commonFunctions.inc.php";
	include "../library/config.inc.php";
	$fieldValue=array("Location","Skill","GroupName","TL");
	$fieldText=array("Office","Skill group","Resource manager","Team leader");
	$selectID=$_GET['id'];
	$fieldArray=explode(",",urldecode($_GET['fields']));
	$valueArray=explode(",",urldecode($_GET['values']));
	$whereClause="";

	for ($j=0;$j<$selectID;$j++)
	{
		//if($j<$selectID)
		{
			$whereClause_j="$fieldArray[$j] like \"$valueArray[$j]\"";
			if($whereClause=="")
				$whereClause=" where $whereClause_j";
			else
				$whereClause.=" and $whereClause_j";
		}
	}
	echo"<select name=value onchange='javascript:fieldChanged(\"$selectID\")'>";
	selectOptions("Staff",$valueArray[$selectID],$fieldArray[$selectID],1,$whereClause);
	echo"</select>";



?>
zooropa
Forum Newbie
Posts: 6
Joined: Wed May 26, 2010 1:40 pm

Re: Anyone, Anyone, Bueller, Bueller ......

Post by zooropa »

Sorry but i'm not familiar with Ajax calls although i've got a basic familiarity of its capabilities (and can see that it's a much nicer way to implement what i'm trying to do). I'm guessing that there's a fair learning curve involved - for the moment i was looking for a non-Ajax solution. Thanks, Mark
internet-solution
Forum Contributor
Posts: 220
Joined: Thu May 27, 2010 6:27 am
Location: UK

Re: Anyone, Anyone, Bueller, Bueller ......

Post by internet-solution »

Without ajax, you will have to refresh the page. AJAX is not at all difficult. Please see the last three javascript functions in staffSearchAdvanced.php file in my previous post
zooropa
Forum Newbie
Posts: 6
Joined: Wed May 26, 2010 1:40 pm

Re: Anyone, Anyone, Bueller, Bueller ......

Post by zooropa »

Thanks for your reply. Maybe i should just dive into Ajax then.
Could I ask - is the file commonFunctions.inc.php an include file that you've made yourself?
Could you recommend a good Behinners Ajax Book?
internet-solution
Forum Contributor
Posts: 220
Joined: Thu May 27, 2010 6:27 am
Location: UK

Re: Anyone, Anyone, Bueller, Bueller ......

Post by internet-solution »

CommonFunctions.inc.php is a file I created for storing all general purpose functions. For example I have a addHeader() function which creates standard header for all my php pages.

I did not use any books for ajax. See here for good examples - http://www.w3schools.com/ajax/default.asp
Post Reply