Chained select box using Javascript and ColdFusion

Hello,

I am trying to modify a working chained select box script to substitute the PHP part with ColdFusion as PHP is not an option for us.  I believe it's the ColdFusion code that doesn't seem to work given that it's all that's changed.  I suspect it's in the "obj" lines but not sure.

The Header code, original PHP and new ColdFusion code sections are attached to the Code Snippet.

THANKS!
*********************************************
HEADER SECTION:
 
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
 
function getChildrenList(sel)
	{
		var parentCode = sel.options[sel.selectedIndex].value;
		document.getElementById('dhtml_children').options.length = 0;	// Empty city select box
		if(parentCode.length>0){
			var index = ajax.length;
			ajax[index] = new sack();
			ajax[index].requestFile = 'getChildren.cfm?parentCode='+parentCode;	// Specifying which file to get
			ajax[index].onCompletion = function(){ createChildren(index) };	// Specify function that will be executed after file has been found
			ajax[index].runAJAX();		// Execute AJAX function
		}
	}
	
	function createChildren(index)
	{
		var obj = document.getElementById('dhtml_children');
		eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
	}
 
</script>
 
 
 
</head>
 
<body>
 
<form action="" method="post">
<table>
	<tr>
		<td>Parent: </td>
		<td><select id="dhtml_parents" name="dhtml_parents" onchange="getChildrenList(this)">
			<option value="">Select a parent item</option>
			<option value="p1">Parent 1</option>
			<option value="p2">Parent 2</option>
			<option value="p3">Parent 3</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>Children: </td>
		<td>
        	<select id="dhtml_children" name="dhtml_children">
		
			</select>
		</td>
	</tr>
</table>
</form>
 
*********************************
ORIGINAL PHP - getChildren.php (the ColdFusion modifications are in the next section)
 
<?php
 
if(isset($_GET['parentCode'])){
  
  switch($_GET['parentCode']){
    
    case "p1":
      echo "obj.options[obj.options.length] = new Option('Child 1','1');\n";
      echo "obj.options[obj.options.length] = new Option('Child 2','2');\n";
      echo "obj.options[obj.options.length] = new Option('Child 3','3');\n";
      echo "obj.options[obj.options.length] = new Option('Child 4','4');\n";
      
      break;
    case "p2":
      
      echo "obj.options[obj.options.length] = new Option('Child 5','11');\n";
      echo "obj.options[obj.options.length] = new Option('Child 6','12');\n";
      echo "obj.options[obj.options.length] = new Option('Child 7','13');\n";
      
      break;
    case "p3":
      
      echo "obj.options[obj.options.length] = new Option('Child 8','21');\n";
      echo "obj.options[obj.options.length] = new Option('Child 9','22');\n";
      echo "obj.options[obj.options.length] = new Option('Child 10','23');\n";
      echo "obj.options[obj.options.length] = new Option('Child 11','24');\n";
      echo "obj.options[obj.options.length] = new Option('Child 12','25');\n";
      echo "obj.options[obj.options.length] = new Option('Child 13','26');\n";
      echo "obj.options[obj.options.length] = new Option('Child 14','27');\n";
      
      break;
  }  
}
 
?> 
 
 
***************************************
NEW ColdFusion code that doesn't seem to work.  I suspect it's in the "obj" lines but not sure.
 
<cfswitch expression="#parentCode#">
	<cfcase value="p1">   	
 
		<cfscript>
          obj.options[obj.options.length] = new Option('Child 1','1');
          obj.options[obj.options.length] = new Option('Child 2','2');
          obj.options[obj.options.length] = new Option('Child 3','3');
          obj.options[obj.options.length] = new Option('Child 4','4');
        </cfscript>
 
	<cfcase value="p2">  
 
        <cfscript
          obj.options[obj.options.length] = new Option('Child 5','11');
          obj.options[obj.options.length] = new Option('Child 6','12');
          obj.options[obj.options.length] = new Option('Child 7','13');
        </cfscript>
 
	<cfcase value="p3">  
 
        <cfscript
          obj.options[obj.options.length] = new Option('Child 8','21');
          obj.options[obj.options.length] = new Option('Child 9','22');
          obj.options[obj.options.length] = new Option('Child 10','23');
          obj.options[obj.options.length] = new Option('Child 11','24');
          obj.options[obj.options.length] = new Option('Child 12','25');
          obj.options[obj.options.length] = new Option('Child 13','26');
          obj.options[obj.options.length] = new Option('Child 14','27');
        </cfscript>        
 
    <cfdefaultcase>
       
    </cfdefaultcase>
</cfswitch>	
 
 
 
Thanks for your help!!!

Open in new window

IRHuskerAsked:
Who is Participating?
 
duncancummingConnect With a Mentor Commented:
In Coldfusion, arrays are indexed from 1, not zero.  So obj.options[obj.options.length] won't do what you want.  Instead, as you seem to be hardcoding all the elements, just hardcode the array items too:
 obj.options[1]= new Option('Child 1','1');
          obj.options[2] = new Option('Child 2','2');
          obj.options[3] = new Option('Child 3','3');
          obj.options[4] = new Option('Child 4','4');
etc.  

Also you're missing a closing > after your cfscript tags, and also you're omitting the closing </cfcase> tags.

And if I understand your code correctly, it looks like you're trying to output some javascript.  I'm not sure putting everything in cfscript is going to do what you want.  Instead maybe just try:

<cfswitch expression="#parentCode#">
        <cfcase value="p1">     
          obj.options[obj.options.length] = new Option('Child 1','1');
          obj.options[obj.options.length] = new Option('Child 2','2');
          obj.options[obj.options.length] = new Option('Child 3','3');
          obj.options[obj.options.length] = new Option('Child 4','4');
 		</cfcase>
		
        <cfcase value="p2">  
          obj.options[obj.options.length] = new Option('Child 5','11');
          obj.options[obj.options.length] = new Option('Child 6','12');
          obj.options[obj.options.length] = new Option('Child 7','13');     
 		</cfcase>
		
        <cfcase value="p3">  
          obj.options[obj.options.length] = new Option('Child 8','21');
          obj.options[obj.options.length] = new Option('Child 9','22');
          obj.options[obj.options.length] = new Option('Child 10','23');
          obj.options[obj.options.length] = new Option('Child 11','24');
          obj.options[obj.options.length] = new Option('Child 12','25');
          obj.options[obj.options.length] = new Option('Child 13','26');
          obj.options[obj.options.length] = new Option('Child 14','27');
 		</cfcase>
		
    <cfdefaultcase>
       
    </cfdefaultcase>
</cfswitch>     

Open in new window

0
 
IRHuskerAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.