cLFlaVA,
Well, let's see if I can explain what I did and what I am trying to do. It's complicated, but I'll try to simplify.
I have an asp page used to configure a message which is made out of takes. A take is a portion of the message that could be static configurable. The takes that are static do not change, ie, "the next", "will now arrive on", a comma or a period. The configurable takes are organized into drop-down boxes by take kind and these could be stations, lines, directions and so forth. So, stations could be one take kind, lines could be another take kind and so forth.
This is an example of a configurable message. Any content in "[ ]" would be considered configurable.
Code:
[ATTENTION LINES], we regret to inform you that we have been forced to suspend [DIRECTION CLASS] [STATIONS] [CAUSE]. Substitute bus service is running from [STATIONS] to [STATIONS].
This message would be followed by a series of drop-down boxes organized from [ATTENTION LINES] to [STATIONS], so there would be a total of six drop down boxes for this message. The first drop down, [ATTENTION LINES], would be considered the pivot for this message, meaning, if you choose "Orange Line" as a value, then the [DIRECTION CLASS] and all three [STATIONS] drop-down boxes should update dynamically. [DIRECTION CLASS] would contain only values pertinent to the direction that the orange line trains travel, ie. east and west, and [STATIONS] would only contain a list of orange line stations. So, the [DIRECTION CLASS] and [STATIONS] drop-down would be considered the drop-downs synched with [ATTENTION LINES] at all times. I have many more messages that are organized in this fashion.
The html portion of the asp page with the drop-downs looks like this.
Code:
<tr class="item" height="28">
<td width="350" nowrap>Attention Lines</td>
<td width="425" nowrap>
<select name="text1" id="text1" onChange="ValidateSel(this); OnSelText(this);" size="1" style="width: 300px;"
>
<option value="0" selected>Select Attention Lines
<option value="1000"
>Red Line (RL)
<option value="1001"
>Orange Line (OL)
<option value="1002"
>Blue Line (BL)
<option value="1003"
>Green Line (GL)
<option value="1004"
>Silver Line (SL)
<option value="1005"
>Attention Passengers
</select>
<input type="hidden" id="takekind1" name="takekind1" value="1">
<input type="hidden" id="pivotflag1" name="pivotflag1" value="Y">
<input type="hidden" id="syncflag1" name="syncflag1" value="N">
</td>
</tr>
<tr class="item" height="28">
<td width="350" nowrap>Direction Class</td>
<td width="425" nowrap>
<select name="text2" id="text2" onChange="ValidateSel(this); OnSelText(this);" size="1" style="width: 300px;"
disabled>
<option value="0" selected>Select Direction Class
<option value="15000"
>Northbound to
<option value="15001"
>Southbound to
<option value="15002"
>Eastbound to
<option value="15003"
>Westbound to
<option value="15004"
>Northbound Service to
<option value="15005"
>Southbound Service to
<option value="15006"
>Eastbound Service to
<option value="15007"
>Westbound Service to
<option value="15008"
>Northbound Service from
<option value="15009"
>Southbound Service from
<option value="15010"
>Eastbound Service from
<option value="15011"
>Westbound Service from
</select>
<input type="hidden" id="takekind2" name="takekind2" value="15">
<input type="hidden" id="pivotflag2" name="pivotflag2" value="N">
<input type="hidden" id="syncflag2" name="syncflag2" value="Y">
</td>
</tr>
<tr class="item" height="28">
<td width="350" nowrap>Stations</td>
<td width="425" nowrap>
<select name="text3" id="text3" onChange="ValidateSel(this); OnSelText(this);" size="1" style="width: 300px;"
disabled>
<option value="0" selected>Select Stations
<option value="4000"
>Alewife (RALE)
<option value="4001"
>Davis (RDAV)
<option value="4002"
>Porter (RPOR)
<option value="4003"
>Harvard (RHAR)
<option value="4004"
>Central (RCEN)
<option value="4005"
>Kendall/MIT (RKEN)
<option value="4006"
>Charles/MGH (RMGH)
<option value="4007"
>Park St. (RPRK)
<option value="4008"
>Downtown Crossing (RDTC)
<option value="4009"
>South Station (RSOU)
<option value="4010"
>Broadway (RBRO)
<option value="4011"
>Andrew (RAND)
<option value="4012"
>JFK-UMass (RJFK)
<option value="4013"
>Savin Hill (RSAV)
<option value="4014"
>Fields Corner (RFIE)
<option value="4015"
>Shawmut (RSHA)
<option value="4016"
>Ashmont (RASH)
<option value="4017"
>North Quincy (RNQU)
<option value="4018"
>Wollaston (RWOL)
<option value="4019"
>Quincy Center (RQUC)
<option value="4020"
>Quincy Adams (RQUA)
<option value="4021"
>Braintree (RBRA)
<option value="4022"
>Oak Grove (OOAK)
<option value="4023"
>Malden (OMAL)
<option value="4024"
>Wellington (OWEL)
<option value="4025"
>Sullivan Square (OSUL)
<option value="4026"
>Community College (OCOM)
<option value="4027"
>North Station (ONST)
<option value="4028"
>Haymarket (OHAY)
<option value="4029"
>State Northbound (OSTN)
<option value="4030"
>State Southbound (OSTS)
<option value="4031"
>Downtown Crossing Northbound (ODTN)
<option value="4032"
>Downtown Crossing Southbound (ODTS)
<option value="4033"
>Chinatown Northbound (OCHN)
<option value="4034"
>Chinatown Southbound (OCHS)
<option value="4035"
>NE Medical Center (ONEM)
<option value="4036"
>Back Bay (OBAC)
<option value="4037"
>Mass Ave. (OMAS)
<option value="4038"
>Ruggles (ORUG)
<option value="4039"
>Roxbury Crossing (OROX)
<option value="4040"
>Jackson Sq (OJAC)
<option value="4041"
>Stony Brook (OSTO)
<option value="4042"
>Green St. (OGRE)
<option value="4043"
>Forest Hills (OFOR)
</select>
<input type="hidden" id="takekind3" name="takekind3" value="4">
<input type="hidden" id="pivotflag3" name="pivotflag3" value="N">
<input type="hidden" id="syncflag3" name="syncflag3" value="Y">
</td>
</tr>
<tr class="item" height="28">
<td width="350" nowrap>Cause</td>
<td width="425" nowrap>
<select name="text4" id="text4" onChange="OnSelText(this);" size="1" style="width: 300px;">
<option value="0" selected>Select Cause
<option value="19000"
>Mechanical Problem
<option value="19001"
>Switch Problem
<option value="19002"
>Power Problem
<option value="19003"
>Trespasser Accident
<option value="19004"
>Smoke Conditions
<option value="19005"
>Track Work
<option value="19006"
>Flooding Condition
<option value="19007"
>Track Problem
<option value="19008"
>Police Investigation
<option value="19009"
>Signal Problem
<option value="19010"
>Crossing Accident
<option value="19011"
>Disabled Train
<option value="19012"
>Severe Weather
<option value="19013"
>Vehicle Accident
<option value="19014"
>Overhead Electric Wire
<option value="19015"
>Track Obstruction
<option value="19016"
>Medical emergency
</select>
<input type="hidden" id="takekind4" name="takekind4" value="19">
<input type="hidden" id="pivotflag4" name="pivotflag4" value="N">
<input type="hidden" id="syncflag4" name="syncflag4" value="N">
</td>
</tr>
<tr class="item" height="28">
<td width="350" nowrap>Stations</td>
<td width="425" nowrap>
<select name="text5" id="text5" onChange="ValidateSel(this); OnSelText(this);" size="1" style="width: 300px;"
disabled>
<option value="0" selected>Select Stations
<option value="4000"
>Alewife (RALE)
<option value="4001"
>Davis (RDAV)
<option value="4002"
>Porter (RPOR)
<option value="4003"
>Harvard (RHAR)
<option value="4004"
>Central (RCEN)
<option value="4005"
>Kendall/MIT (RKEN)
<option value="4006"
>Charles/MGH (RMGH)
<option value="4007"
>Park St. (RPRK)
<option value="4008"
>Downtown Crossing (RDTC)
<option value="4009"
>South Station (RSOU)
<option value="4010"
>Broadway (RBRO)
<option value="4011"
>Andrew (RAND)
<option value="4012"
>JFK-UMass (RJFK)
<option value="4013"
>Savin Hill (RSAV)
<option value="4014"
>Fields Corner (RFIE)
<option value="4015"
>Shawmut (RSHA)
<option value="4016"
>Ashmont (RASH)
<option value="4017"
>North Quincy (RNQU)
<option value="4018"
>Wollaston (RWOL)
<option value="4019"
>Quincy Center (RQUC)
<option value="4020"
>Quincy Adams (RQUA)
<option value="4021"
>Braintree (RBRA)
<option value="4022"
>Oak Grove (OOAK)
<option value="4023"
>Malden (OMAL)
<option value="4024"
>Wellington (OWEL)
<option value="4025"
>Sullivan Square (OSUL)
<option value="4026"
>Community College (OCOM)
<option value="4027"
>North Station (ONST)
<option value="4028"
>Haymarket (OHAY)
<option value="4029"
>State Northbound (OSTN)
<option value="4030"
>State Southbound (OSTS)
<option value="4031"
>Downtown Crossing Northbound (ODTN)
<option value="4032"
>Downtown Crossing Southbound (ODTS)
<option value="4033"
>Chinatown Northbound (OCHN)
<option value="4034"
>Chinatown Southbound (OCHS)
<option value="4035"
>NE Medical Center (ONEM)
<option value="4036"
>Back Bay (OBAC)
<option value="4037"
>Mass Ave. (OMAS)
<option value="4038"
>Ruggles (ORUG)
<option value="4039"
>Roxbury Crossing (OROX)
<option value="4040"
>Jackson Sq (OJAC)
<option value="4041"
>Stony Brook (OSTO)
<option value="4042"
>Green St. (OGRE)
<option value="4043"
>Forest Hills (OFOR)
</select>
<input type="hidden" id="takekind5" name="takekind5" value="4">
<input type="hidden" id="pivotflag5" name="pivotflag5" value="N">
<input type="hidden" id="syncflag5" name="syncflag5" value="Y">
</td>
</tr>
<tr class="item" height="28">
<td width="350" nowrap>Stations</td>
<td width="425" nowrap>
<select name="text6" id="text6" onChange="ValidateSel(this); OnSelText(this);" size="1" style="width: 300px;"
disabled>
<option value="0" selected>Select Stations
<option value="4000"
>Alewife (RALE)
<option value="4001"
>Davis (RDAV)
<option value="4002"
>Porter (RPOR)
<option value="4003"
>Harvard (RHAR)
<option value="4004"
>Central (RCEN)
<option value="4005"
>Kendall/MIT (RKEN)
<option value="4006"
>Charles/MGH (RMGH)
<option value="4007"
>Park St. (RPRK)
<option value="4008"
>Downtown Crossing (RDTC)
<option value="4009"
>South Station (RSOU)
<option value="4010"
>Broadway (RBRO)
<option value="4011"
>Andrew (RAND)
<option value="4012"
>JFK-UMass (RJFK)
<option value="4013"
>Savin Hill (RSAV)
<option value="4014"
>Fields Corner (RFIE)
<option value="4015"
>Shawmut (RSHA)
<option value="4016"
>Ashmont (RASH)
<option value="4017"
>North Quincy (RNQU)
<option value="4018"
>Wollaston (RWOL)
<option value="4019"
>Quincy Center (RQUC)
<option value="4020"
>Quincy Adams (RQUA)
<option value="4021"
>Braintree (RBRA)
<option value="4022"
>Oak Grove (OOAK)
<option value="4023"
>Malden (OMAL)
<option value="4024"
>Wellington (OWEL)
<option value="4025"
>Sullivan Square (OSUL)
<option value="4026"
>Community College (OCOM)
<option value="4027"
>North Station (ONST)
<option value="4028"
>Haymarket (OHAY)
<option value="4029"
>State Northbound (OSTN)
<option value="4030"
>State Southbound (OSTS)
<option value="4031"
>Downtown Crossing Northbound (ODTN)
<option value="4032"
>Downtown Crossing Southbound (ODTS)
<option value="4033"
>Chinatown Northbound (OCHN)
<option value="4034"
>Chinatown Southbound (OCHS)
<option value="4035"
>NE Medical Center (ONEM)
<option value="4036"
>Back Bay (OBAC)
<option value="4037"
>Mass Ave. (OMAS)
<option value="4038"
>Ruggles (ORUG)
<option value="4039"
>Roxbury Crossing (OROX)
<option value="4040"
>Jackson Sq (OJAC)
<option value="4041"
>Stony Brook (OSTO)
<option value="4042"
>Green St. (OGRE)
<option value="4043"
>Forest Hills (OFOR)
</select>
<input type="hidden" id="takekind6" name="takekind6" value="4">
<input type="hidden" id="pivotflag6" name="pivotflag6" value="N">
<input type="hidden" id="syncflag6" name="syncflag6" value="Y">
</td>
</tr>
The javascript call, "onChange="ValidateSel(this);", is the trigger. On 1st page load, all configurable drop-down boxes are disabled except for the first one, [ATTENTION LINES]. This is needed to choose a value, then call ValidateSel().
Code:
function ValidateSel(item)
{
var num = parseInt(item.id.substring(4));
var ntakes = document.getElementById("ntakes").value;
//Determine TakeID value from text1 drop-down box
var takeID = document.getElementById("text1").value;
var name, takekind, takekindID;
if (item.selectedIndex != 0)
{
//Determine which drop-down select boxes are disabled
for (i=1; i<=ntakes; i++)
{
name = "text" + i;
if (document.getElementById(name).disabled == true)
{ // enable drop down
document.getElementById(name).disabled = false;
// get take kind id
takekind = "takekind" + i;
takekindID = document.getElementById(takekind).value;
//alert("takeID: " + takeID + ", takekindID: " + takekindID);
// Call makeRequest() to see if I can read an html file
makeRequest(takeID, takekindID);
}
}
}
}// end ValidateSel function
ValidateSel() grabs the take value of the 1st drop down, the number of configurable takes, then loops through each disabled synched drop down and enables it. After enabling it, the function gets the take kind id value. The function calls makeRequest and sends the takeID of the pivot and takekindID of the 1st synched drop-down.
The makeRequest() function basically sets up and sends an http request to send the takeID and takeKindID to an asp page, create an xml and recieve the response.
Code:
function makeRequest(takeID, takekindID)
{
http_request = false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!http_request)
{
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
var params = "TakeID="+takeID +"&TakeKindID="+takekindID;
url = getPath("test2.asp");
http_request.open('POST', url, true);
http_request.setRequestHeader('Content-Type', 'application/x-[URL unfurl="true"]www-form-urlencoded');[/URL]
http_request.send(params);
}// end makeRequest
The alertContents() function recieves the xml response and sends it to a parser function, parseXML().
Code:
function alertContents()
{
if (http_request.readyState == 4)
{
//alert("readyState: " + http_request.readyState);
if (http_request.status == 200 || http_request.status == 0)
{
alert(http_request.responseText);
//alert(http_request.responseXML);
var xml = http_request.responseXML;
parseXML(xml);
}
else
{
alert('There was a problem with the request.');
}
}
}// end alertContents
The test2.asp page contains vbscript that takes the takeID and takekindID from the makeRequest() function, puts it in a SQL statement to return a recordset that represent all stations on the line that was selected in the [ATTENTION LINES] drop-down. An xml document is then created that stores the take id and description of each take id and the response is sent back to the alertContents() function. parseXML() recieves the xml object via alertContents and parses each <take> element retrieving the take id and description of each value.
Code:
function parseXML(xml)
{
// get elements called <take> in xml
var takes = xml.getElementsByTagName("take");
// iterate through the number of <take> elements (takes.length)
// to determine values
for (var i=0; i<takes.length; i++)
{
if (navigator.appName=="Netscape")
{ // FF
var takeID = takes[i].attributes["id"].value;
var takeDesc = takes[i].attributes["description"].value;
}
else
{ // IE
var takeID = takes.item(i).getAttribute("id");
var takeDesc = takes.item(i).getAttribute("description");
}
}
return;
}// end parseXML
So, this functionality occurs in a loop for every synched drop-down. So, I need to develop code that takes the values from parseXML() and uses them to update the values in [DIRECTION CLASS] and all [STATIONS] drop-downs dynamically. One problem I have is that I can only get the xml responses to occur after the page first loads, which means the synched drop-downs are disabled. I need to be able to do this at all times, especially when the drop-downs are all enabled. So, my ValidateSel() will have to be updated to handle this.
I know this is a very lengthy post, but it's rather complicated and has taken me a long time to get where I am now. So, to summate, I need to take the parsed xml response values and update the associated drop-down dynamiccaly. Any help would be greatly appreciated.
Thanks,