Anyone, Anyone, Bueller, Bueller ......
Moderator: General Moderators
Anyone, Anyone, Bueller, Bueller ......
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 ......
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
Second file - staffSearchAdvanced.ajax.php - handles ajax requests from javascript
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>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 ......
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 ......
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 ......
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?
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 ......
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
I did not use any books for ajax. See here for good examples - http://www.w3schools.com/ajax/default.asp