Page 1 of 1

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

Posted: Thu May 27, 2010 5:18 am
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

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

Posted: Thu May 27, 2010 7:20 am
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>";



?>

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

Posted: Thu May 27, 2010 7:44 am
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

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

Posted: Thu May 27, 2010 8:30 am
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

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

Posted: Thu May 27, 2010 9:58 am
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?

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

Posted: Thu May 27, 2010 11:26 am
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