?
Solved

Chained select box using Javascript and ColdFusion

Posted on 2008-11-13
2
Medium Priority
?
1,255 Views
Last Modified: 2013-12-13
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

0
Comment
Question by:IRHusker
2 Comments
 
LVL 16

Accepted Solution

by:
duncancumming earned 2000 total points
ID: 22962009
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
 

Author Closing Comment

by:IRHusker
ID: 31516491
Thank you!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 23 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question