View Single Post
Old 12-12-2010, 08:14 PM   #2
bxdobs
 
Join Date: Dec 2010
Posts: 3
Default

I still don't know if Spry/Dreamweaver can do anything close to this automatically (via the auto code builder) ... however ... upon reviewing the AJAX Dynamic Selection Demo from this site coupled with w3schools examples, I have now bashed out a solution. Here is the code ... Note I have removed specific details that define the project I am working on ... hopefully I have made this generic enough to be usefull to others.

Note also that all DOM references don't use INNERHTML due to negative discussions relating to this topic.

// HTML: select.html
<!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=utf-8" />
<title>Test</title>

// 4 linked Selection objects
<form id='Selection'>
<select id='A' size='1' onchange=fnSelect('A',this.value)>
</select>
<select id='B' size='1' onchange=fnSelect('B',this.value)>
</select>
<select id='C' size='1' onchange=fnSelect('C',this.value)>
</select>
<select id='D' size='1' onchange=fnSelect('D',this.value)>
</select>
</form>

</head>
<body onload=fnSelect("","")>

<form id="A">
// do something once all selections are made
</form>

// per several forums, javascript includes should be loaded last
<script type="text/javascript" src="select.js"></script>
</body>
</html>

// Java Script select.js

// JavaScript Document<script language="javascript">
function fnClearList(chType) // Clear Select List
{
document.getElementById(chType).options.length = 0;
}

function fnAddToList(chType,chText,chVal) // Add to List
{
chLen = document.getElementById(chType).length;
if(chVal == "")
{
chValue = chLen;
} else {
chValue = chVal;
}
document.getElementById(chType).options[chLen]=new Option(chText,chValue);
}

function fnStatus(chType,chState)
{
if (chState == "Enable")
{
document.getElementById(chType).disabled=false;
} else {
document.getElementById(chType).disabled=true;
}
}

function fnSelect(chType,inValue)
{
switch(chType)
{
case "A":

fnStatus("B","Enable");
fnClearList("B");
fnAddToList("B"," --- Loading --- ","");
fnStatus("B","Disable");

fnClearList("C");
fnAddToList("C"," --- Select C --- ","");
fnStatus("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnStatus("D","Disable");

fnGetData("B",inValue);

break;

case "B":

fnStatus("C","Enable");
fnClearList("C");
fnAddToList("C"," --- Loading --- ","");
fnStatus("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnStatus("D","Disable");

fnGetData("C",inValue);
break;

case "C":

fnStatus("D","Enable");
fnClearList("D");
fnAddToList("D"," --- Loading --- ","");
fnStatus("D","Disable");

fnGetData("D",inValue);

break;

case "D":
alert("E");
// load whatever
break;
default:
fnClearList("B");
fnAddToList("B"," --- Select B --- ","");
fnStatus("B","Disable");

fnClearList("C");
fnAddToList("C"," --- Select C --- ","");
fnStatus("C","Disable");

fnClearList("D");
fnAddToList("D"," --- Select D --- ","");
fnStatus("D","Disable");
fnGetData("A","*");

}
}

function fnUpdate(chType,chReturn)
{
fnStatus(chType,"Enable");
fnClearList(chType);

var chArray = chReturn.split('~');

var x;

for (x in chArray)
{
if(x%2==1)
{
// fnAddToList(<List ID>, <Text to List>, <list Value>)
fnAddToList(chType,chArray[x],chArray[x-1]);
}
}

// If there is only one value in the returned list then select the next list
if(chArray.length ==2)
{
fnSelect(chType,chArray[0]);
}
}

function fnGetData(chType,chValue)
{
var xmlHttp;

try
{
xmlHttp = new XMLHttpRequest(); // Opera 8.0+, Firefox, Safari, IE7 or greater

} catch (chErr) {

try // Internet Explorer Browsers IE6 or earlier
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (chErr) {

try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (chErr) {

alert("Sorry! There was a problem loading data in this Browser. Please try again using another Browser"); // Something went wrong

return false;
}
}
}

xmlHttp.onreadystatechange=function() // Receive Data Function
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{

fnUpdate(chType, xmlHttp.responseText);

}
}

chUrl = "select.php";
chParm = "type=" + chType + "&" + "value=" + chValue;
chStr = chUrl+"?"+chParm;

xmlHttp.open("GET",chStr,true);
xmlHttp.send(null);
}

// PHP: select.php
<?php
require_once("Connections/Database.php"); // database connection
// Retrieve data from Query String
$chType = $_GET['type'];
$chValue = $_GET['value'];
//build query
mysql_select_db($database_Database, $Database);
switch($chType)
{ // chID and chDesc give you more flexibility on your table linking
// the HTML SELECT object will be passed chID as Value and chDesc as Text
case "A":
$query = "SELECT * FROM a";
$chID = "A_ID";
$chDesc = "A_Desc";
break;
case "B":
// BX_ID is a sublevel Grouping Reference used instead of B_ID
$query = "SELECT * FROM b WHERE A_ID = $chValue";
$chID = "BX_ID"; // or could be B_ID
$chDesc = "B_Desc";
break;
case "C":
$query = "SELECT * FROM c WHERE BX_ID = $chValue";
$chID = "C_ID";
$chDesc = "C_Desc";
break;
case "D":
// Field D_Val was more user Descriptive then the D_Desc field in this table
$query = "SELECT * FROM d WHERE C_ID = $chValue";
$chID = "D_ID";
$chDesc = "D_Val"; // or could be D_Desc
break;
default:
$chID = "";
$chDesc = "";
}
$result = @mysql_query($query,$Database) or die(mysql_error());
$rowModel = mysql_fetch_assoc($result);
$totalrows = mysql_num_rows($result);

//Build Result String
if($totalrows <> 1)
{
$dropdown = "0~ --- Select $chType --- ";
}

// Insert a new row in the List for each record returned
do {
if($totalrows >= 2)
{
$dropdown .= "~$rowModel[$chID]~$rowModel[$chDesc]";
} else {
$dropdown = "$rowModel[$chID]~$rowModel[$chDesc]";
}

}while ($rowModel = mysql_fetch_assoc($result));

$rows - mysql_num_rows($result);

if($rows > 0) {
mysql_data_seek($result,0);
$rowModel = mysql_fetch_assoc($result);
}

// Return a "~" delimited list of values for the List requested
echo $dropdown;

// Close the DB
mysql_close($Database);
?>
bxdobs is offline   Reply With Quote