logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-07-2010, 12:27 AM   #1
bxdobs
 
Join Date: Dec 2010
Posts: 3
Default Spry/Ajax/xmlhttp

As a programmer of 30+ years of micro code to oop experience, I thought I would have no problems jumping into a Web Project especially with the purchase of CS5. Wasn't expecting to get frustrated simply trying to dynamically fill several dependant list boxes from a server side SQL DB without having to reload the HTML page. The concept of dynamic loading appears to work as a one shot when the page loads the problem I am having is getting new data after the page is loaded.

Consider a set of 4 lists each dependant on the previous list ie Country, State, City, Address ... State is dependant on Country, City on State etc.

Reading SPRY advertising, it sounds as though SPRY should be able to do this with the provided library but I haven't found any related examples.

I understand the client/server requires an XMLHTTP object ... JS PUT/GET is required to initiate a call to the server side to trigger a PHP routine to pull data back to the client side.
HTML event -> JS fnc() -> AJAX -> PHP fnc() -> SQL -> PHP fnc() -> AJAX -> JS fnc() -> HTML object

With all the automatted code in DW I guess I was expecting not to have to get my hands dirty to do this? So far I still haven't been able to even get any of the AJAX/PHP/JS examples for doing table transfers to work for me using CS5 and XAMPP. Most of the examples I have been playing with are from w3schools.com

Scoured the net but didn't turn up any examples to dynamically fill a select box ... this usually means I am missing a concept ie its too simple to require an example ... or ... its beyond the scope of most DIY sites?

What I have figured out so far:
1) disable/enable an HTML <select> object

2) clear an HTML <select> object

3) load an HTML <select> object

What I need to still figure out
a) change HTML object focus

b) trigger a Server side call with the current select value
- I expect a <select onchange event> needs to trigger a JS function to do an XMLHTML object call to GET/PUT to trigger a Server Side PHP function which will do the SQL Select call

c) trigger a client side JS update function to populate, enable and focus the next <select> object with the returned Server side data.
- I expect this requires a a callback function

OR

Is there a SPRY method/procedure/libratry that can be used to generate all the necessary interlinking code.

I don't want to reinvent the wheel here ... I guess I expected Dynamic Data Exchange would be a basic functionality built in to any current web design tool.
bxdobs is offline   Reply With Quote
Old 12-12-2010, 09: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
Old 12-12-2010, 10:19 PM   #3
bxdobs
 
Join Date: Dec 2010
Posts: 3
Default

Still don't know if there is a SPRY way to accomplish a dynamic Select scenario?

I have managed to bash out a solution by getting my hands dirty.

Attached is code built using concepts from http://www.w3schools.com and a demo on this site http://www.dreamweaverclub.com/vtm/a...-dropdowns.php

I have removed any project specific references but here is the code I have put together to accomplish the posted request. Hopefully it may be usefull for others.

Code:
 
<!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>
<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="Detail">
</form>
<script type="text/javascript" src="select.js"></script>
</body>
</html>
--------------------------------------------------------------------
// select.js
// JavaScript Document<script language="javascript">
function fnClearList(chType) // Clear 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 fnState(chType,chState)
{
if (chState == "Enable")
{
document.getElementById(chType).disabled=false;
} else {
document.getElementById(chType).disabled=true;
}
}
function fnSelect(chType,inValue)
{ 
switch(chType)
{
case "A":

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

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

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

fnGetData("B",inValue);

break; 

case "B": 

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

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

fnGetData("C",inValue);

break; 

case "C": 

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

fnGetData("D",inValue);

break;

case "D": 

// load whatever the 4 list selections point to here

break;
default:
fnClearList("B");
fnAddToList("B"," --- Select B --- ","");
fnState("B","Disable");

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

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

}
}

function fnUpdate(chType,chReturn)
{
fnState(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 row 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); 

// alert("get:" + chUrl + " " + chParm);
}
-----------------------------------------------------------------------------------------
// 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)
{
case "A":
$query = "SELECT * FROM a";
$chID = "A_ID";
$chDesc = "A_Desc"; 
break;
case "B":
$query = "SELECT * FROM b WHERE A_ID = $chValue";
$chID = "Group_ID";
$chDesc = "B_Desc";
break; 
case "C":
$query = "SELECT * FROM c WHERE Group_ID = $chValue";
$chID = "C_ID";
$chDesc = "C_Desc";
break;
case "D":
$query = "SELECT * FROM d WHERE C_ID = $chValue";
$chID = "Spec_ID";
$chDesc = "Spec_Val";
break;
default:
$chID = "";
$chDesc = ""; 
}
$result = @mysql_query($query,$Database) or die(mysql_error()); 
$rowB = 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 table for each person returned
do {
if($totalrows >= 2)
{
$dropdown .= "~$rowB[$chID]~$rowB[$chDesc]";
} else {
$dropdown = "$rowB[$chID]~$rowB[$chDesc]";
}
}while ($rowB = mysql_fetch_assoc($result));
$rows - mysql_num_rows($result);
if($rows > 0) {
mysql_data_seek($result,0);
$rowB = mysql_fetch_assoc($result);
}
// return list delimited by "~" in the form Value~Text
echo $dropdown;
mysql_close($Database);
?>
bxdobs is offline   Reply With Quote
Old 12-13-2010, 12:08 AM   #4
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Thanks for answering your own question and sharing!
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:38 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com