Troubleshooting Dependent Lists

[jmartmem]

Greetings,

I have an ASP page with two dynamic dependent list boxes written in JavaScript. My dependent lists work great, but my problem is that the values for "Program_Na me" and "Project_Na me" are passed onto this page from a previous page and I haven't been able to figure out how to show the passed values in the list boxes when the page loads.

All variables passed perfectly before I added the dependent list code below. Currently, when the page loads, there are no values for "Program_Na me" or "Project_Na me". However, when I make a change to "EZWorkstre am", the onChange events fire perfectly and values then appear in my dependent list boxes.

I'm far from an expert in JavaScript (the code below I adapted from Adobe.com), so here's what I have (I hope it isn't too much):

<!-- Dynamic Dependent List box Code for *** VBScript *** Server Model //--><script language="JavaScript"><!--
var arrDynaList2 = new Array();
var arrDL2 = new Array();
arrDL2[1] = "EZworkstream";           // Name of parent list box
arrDL2[2] = "form1";                  // Name of form containing parent list box
arrDL2[3] = "Program_Name";         // Name of child list box
arrDL2[4] = "form1";                  // Name of form containing child list box
arrDL2[5] = arrDynaList2;
<%
Dim txtDynaListRelation2, txtDynaListLabel2, txtDynaListValue2, oDynaListRS2
txtDynaListRelation2 = "CategoryID"    ' Name of recordset field relating to parent
txtDynaListLabel2 = "Program_Name"    ' Name of recordset field for child Item Label
txtDynaListValue2 = "SubCat_ID"        ' Name of recordset field for child Value
Set oDynaListRS2 = Program_Name         ' Name of child list box recordset
Dim varDynaList2
varDynaList2 = -1
Dim varMaxWidth2
varMaxWidth2 = "1"
Dim varCheckGroup2
varCheckGroup2 = oDynaListRS2.Fields.Item(txtDynaListRelation2).Value
Dim varCheckLength2
varCheckLength2 = 0
Dim varMaxLength2
varMaxLength2 = 0
While (NOT oDynaListRS2.EOF)
 If (varCheckGroup2 <> oDynaListRS2.Fields.Item(txtDynaListRelation2).Value) Then
  If (varCheckLength2 > varMaxLength2) Then
   varMaxLength2 = varCheckLength2
  End If
  varCheckLength2 = 0
 End If
%>
 arrDynaList2[<%=(varDynaList2+1)%>] = "<%=(oDynaListRS2.Fields.Item(txtDynaListRelation2).Value)%>"
 arrDynaList2[<%=(varDynaList2+2)%>] = "<%=(oDynaListRS2.Fields.Item(txtDynaListLabel2).Value)%>"
 arrDynaList2[<%=(varDynaList2+3)%>] = "<%=(oDynaListRS2.Fields.Item(txtDynaListValue2).Value)%>"<%
 If (len(oDynaListRS2.Fields.Item(txtDynaListLabel2).Value) > len(varMaxWidth2)) Then
  varMaxWidth2 = oDynaListRS2.Fields.Item(txtDynaListLabel2).Value
 End If
 varCheckLength2 = varCheckLength2 + 1
 varDynaList2 = varDynaList2 + 3
 oDynaListRS2.MoveNext()
Wend
If (varCheckLength2 > varMaxLength2) Then
 varMaxLength2 = varCheckLength2
End If
%>

var arrDynaList = new Array();
var arrDL1 = new Array();
arrDL1[1] = "Program_Name";         // Name of parent list box
arrDL1[2] = "form1";                  // Name of form containing parent list box
arrDL1[3] = "Project_Name";         // Name of child list box
arrDL1[4] = "form1";                  // Name of form containing child list box
arrDL1[5] = arrDynaList;<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS
txtDynaListRelation = "CategoryID"    ' Name of recordset field relating to parent
txtDynaListLabel = "Project_Name"     ' Name of recordset field for child Item Label
txtDynaListValue = "SubCat_ID"        ' Name of recordset field for child Value
Set oDynaListRS = ProjectName         ' Name of child list box recordset
Dim varDynaList
varDynaList = -1
Dim varMaxWidth
varMaxWidth = "1"
Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value
Dim varCheckLength
varCheckLength = 0
Dim varMaxLength
varMaxLength = 0
While (NOT oDynaListRS.EOF)
 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
 arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation).Value)%>"
 arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Value)%>"
 arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Value)%>"<%
 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Value) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()
Wend
If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>
//--></script><!-- End of object/array definitions, beginning of generic functions --><script language="JavaScript">
<!--
function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 clearDynaList(oList2);
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 oList.selectedIndex = -1;
}
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]",0);
 }
 oList.selectedIndex = 0;
}
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>

Here also FYI are the Call JavaScript behaviors for my onChange and body onLoad events:

<select name="EZworkstream" class="style3" id="EZworkstream" onchange="MM_callJS('setDynaList(arrDL2)');MM_callJS('setDynaList(arrDL1)')">
<select name="Program_Name" class="style3" id="Program_Name" onchange="MM_callJS('setDynaList(arrDL1)')">

Whatever help someone can provide would be greatly appreciated.

JM

[acoder]

How are these values passed? In the URL?

[jmartmem]

Yes. I use a URL variable called "ID", which is the primary key for the record, to pass the variables to the new page and recordsets.

[acoder]

If I understand you correctly, the lists are populated, but the values are not set. Is that correct? If so, then all you need to do is set the value of the select lists corresponding to the values passed using its value property, or you could use ASP to set these values during page load.

[jmartmem]

When the page loads, the two lists in question are not populated and values are not set. It looks as though I've inserted blank lists in a form. The lists only populate when I make a selection to the "grandfathe r" list box, which then fires the onChange event for the 'parent' and 'child' list boxes that I'm trying to set the values for.

Speaking of setting values for these lists, I thought I'd done that already, but I'm obviously doing something wrong or missing something. For example, here's the code for the 'parent' Program_Name list box:

<select name="Program_Name" class="style3" id="Program_Name" onchange="MM_callJS('setDynaList(arrDL1)')">
                <%
While (NOT Program_Name.EOF)
%><option value="<%=(Program_Name.Fields.Item("SubCat_ID").Value)%>" <%If (Not isNull((EZPTSData.Fields.Item("ProgName_Nbr").Value))) Then If (CStr(Program_Name.Fields.Item("SubCat_ID").Value) = CStr((EZPTSData.Fields.Item("ProgName_Nbr").Value))) Then Response.Write("selected=""selected""") : Response.Write("")%> ><%=(Program_Name.Fields.Item("Program_Name").Value)%></option>
                <%
  Program_Name.MoveNext()
Wend
If (Program_Name.CursorType > 0) Then
  Program_Name.MoveFirst
Else
  Program_Name.Requery
End If
%>
              </select>

I thought I'd set the option value correctly, but for whatever reason it isn't passing correctly.

Any suggestions?

[acoder]

Well, if as you say, the list isn't populated, no value is going to be set. This can be solved using ASP. In fact, even the populating, if you want it done onload, can be solved using ASP. If you want to populate using JavaScript, call the setDynaList() function onload.

[jmartmem]

The problem when I call the setDynaList() function onLoad is that the value populated in the list is not the value passed from the previous page but instead is the first value in the list. I'm not sure whether or not I can tweak the JavaScript to make the passed variable appear in the dependent "child" list.

The value populates perfectly when I use ASP without the JavaScript code, but I want the page to have the dependent list functionality, which I only know to incorporate using JavaScript. So, somehow, I've got to figure out how to make the page work with both JavaScript and ASP.

I really appreciate your help here. I think we're close and suspect there's something simple I'm omitting.

JM

[acoder]

In that case, use ASP to generate part of the JavaScript, e.g.
[code=javascript]// selObj is ref. to select element
selObj.value = "<% code to display value %>";[/code]though, again, you could use ASP only too.

[jmartmem]

Forgive me if I'm being dense, but I'm not following you. I don't understand how I could use your above code or ASP only to make it work.

Sorry to be such a pain. Your patience and advice is much appreciated.

JM

[acoder]

OK, let's just stick with one option, using JavaScript and ASP combined as I showed you.

You need to first access the list element whose value needs to be set. If that's "Program_Na me", then you could access it with something like:
[code=javascript]var selObj = document.forms["form1"].elements["Program_Na me"];[/code]
The ASP code only needs to print out the passed value with Response.Write (off the top of my head).

[jmartmem]

One thing I'm not certain about is where to place your suggested code in my existing code. For starters, I placed it below in lines 9 & 10 as follows:

<!-- Dynamic Dependent List box Code for *** VBScript *** Server Model //--><script language="JavaScript"><!--
var arrDynaList = new Array();
var arrDL1 = new Array();
arrDL1[1] = "Program_Name";         // Name of parent list box
arrDL1[2] = "form1";                  // Name of form containing parent list box
arrDL1[3] = "Project_Name";         // Name of child list box
arrDL1[4] = "form1";                  // Name of form containing child list box
arrDL1[5] = arrDynaList;
var selObj = document.forms["form1"].elements["Project_Name"];
selObj.value = "<%Response.Write(ProjectName.Fields.Item("Project_Name").Value)%>";  // selObj is ref. to select element
<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS
txtDynaListRelation = "CategoryID"    ' Name of recordset field relating to parent
txtDynaListLabel = "Project_Name"     ' Name of recordset field for child Item Label
txtDynaListValue = "SubCat_ID"        ' Name of recordset field for child Value
Set oDynaListRS = ProjectName         ' Name of child list box recordset
Dim varDynaList
varDynaList = -1
Dim varMaxWidth
varMaxWidth = "1"
Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value
Dim varCheckLength
varCheckLength = 0
Dim varMaxLength
varMaxLength = 0
While (NOT oDynaListRS.EOF)
 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
 arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation).Value)%>"
 arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Value)%>"
 arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Value)%>"<%
 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Value) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()
Wend
If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>
//--></script><!-- End of object/array definitions, beginning of generic functions --><script language="JavaScript">
<!--
function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 clearDynaList(oList2);
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 oList.selectedIndex = -1;
}
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]",0);
 }
 oList.selectedIndex = 0;
}
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>

However, the problem is that the value in the resulting list (Project_Name, in this case) populates as [none available], which I assume is the result of code row 75 above in the function populateDynaLis t.

Any suggestions?

[acoder]

It has to go in the body onload code. Where have you declared the function to be executed onload?

[jmartmem]

This is my current body onload code:

<body onload="MM_callJS('setDynaList(arrDL1)')">

How would your suggested code fit into this?

[acoder]

Move that into its own function and add those lines underneath this function call, then call that function onload.

[jmartmem]

There's still something I'm missing because it isn't working right...

Here's the new function, which is placed beneath the other onLoad function call:

function DepList()
{
var selObj = document.forms["form1"].elements["Project_Name"];
selObj.value = "<%Response.Write(EZPTSData.Fields.Item("ProjName_Nbr").Value)%>";  // selObj is ref. to select element
}

FYI: The selObj.value is the same as what I set the value equal to for my dynamic list/menu called "Project_Na me".

Here's my new body onLoad call:

<body onload="MM_callJS('setDynaList(arrDL1)');MM_callJS('DepList')">

I must be making an error in my ASP because while the dependent list function fires correctly, the initial value set in the "Project_Na me" dependent list is the first value in the list, not the value passed from the prior page.

Again, I can make the values pass correctly using only ASP but these JavaScript functions (that I don't really understand) are what's causing these issues.