• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

Use Coldfusion in Javascript to populate a Select Dropdown


I have a dropdown select which submit to a hidden Iframe and pass the value back to the Javascript function 'handleResponse' below.  In this function I want to populate another dropdown select based on the value passed from the hidden Iframe.

I've tried to use Coldfusion in the javascript to populate the dropdown but I struggle to make it work.  Can you please tell me what I am doing wrong here.  Please see the script below.  Thank you in advance.

function handleResponse(currVal) {

<cfset atime = StructNew()>
<cfset a = StructInsert(atime, 1,  "9:30 AM", 1)>
<cfset a = StructInsert(atime, 2,  "10:00 AM", 1)>
<cfset a = StructInsert(atime, 3,  "10:30 AM", 1)>
<cfset a = StructInsert(atime, 4,  "11:00 AM", 1)>
<cfset a = StructInsert(atime, 5,  "11:30 AM", 1)>
<cfset a = StructInsert(atime, 6,  "12:00 PM", 1)>
<cfset a = StructInsert(atime, 7,  "12:30 PM", 1)>
<cfset a = StructInsert(atime, 8,  "1:00 PM", 1)>
<cfset a = StructInsert(atime, 9,  "1:30 PM", 1)>
<cfset a = StructInsert(atime, 10, "2:00 PM", 1)>
<cfset a = StructInsert(atime, 11, "2:30 PM", 1)>
<cfset a = StructInsert(atime, 12, "3:00 PM", 1)>
<cfset a = StructInsert(atime, 13, "3:30 PM", 1)>
<cfset a = StructInsert(atime, 14, "4:00 PM", 1)>
<cfset a = StructInsert(atime, 15, "4:30 PM", 1)>
<cfset a = StructInsert(atime, 16, "5:00 PM", 1)>
<cfset a = StructInsert(atime, 17, "5:30 PM", 1)>
<cfset a = StructInsert(atime, 18, "6:00 PM", 1)>
<cfset a = StructInsert(atime, 19, "6:30 PM", 1)>
<cfset a = StructInsert(atime, 20, "7:00 PM", 1)>

<cfset timelist = arrayToList(structSort(atime, "numeric"))>

<cfloop list='#timelist#' index='num'>
   <cfset dropdown  = "<option value='#num#'>#atime[num]#</option>">

if (currVal == 'all') {

   <!---alert("<cfloop list='#timelist#' index='num'><cfoutput>#atime[num]#</cfoutput></cfloop>")--->

  document.apptform.available_time.options.length = 0
  for(i=0;i<<cfoutput>#listlen(timelist)#</cfoutput>;i++) {

        document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)
        //document.write('<option value=' + i + '>' + i + '</option>');

} else {
  • 3
  • 2
1 Solution
The way this code is put together looks like you are trying to mix processing logic between Javascript (client-side code) and Coldfusion (Server-side code). This will not work.

Its important to keep in mind where the code is going to be running to make this work.

Is the above code on the page that is inside the iframe, or is this in the main document?

How is the function handleResponse() called?
valleytechAuthor Commented:
The above code is in the main document.  What happens here is in the main document I have a hidden Iframe:

<iframe id="RSIFrame" name="RSIFrame" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe>

I also have a select dropdown like this:

<select name="select_employee" id="select_employee" disabled=true
   onchange="loadIframe('RSIFrame', this.options[this.selectedIndex].value);
   <option value="">[Select]</option>
  <option value="all">All</option>
<cfoutput query="GetEmployees">
  <option value= "#GetEmployees.NICK_NAME#">#GetEmployees.NICK_NAME#</option>

Here's the Javascript loadIframe function:

function loadIframe(iframeName, url) {
  if ( window.frames[iframeName] ) {
    window.frames[iframeName].location = 'misc/availableTime.cfm?timeVal='+url;
    return false;
  } else return true;

This function execute & pass 'timeVal' variable to availableTime.cfm.  Here's availableTime.cfm:

<cfparam name="URL.select_employee" default="">

<cfif isdefined("URL.timeVal")>      
  <cfset time = '#URL.timeVal#'>

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">




availableTime.cfm pass the variable back to the main document through 'handleResponse' function.  As you saw in the Javascript 'handleResponse' function in the main document, I tried to populate another select dropdown by the values of the 'atime' structure; however I can only populate the select dropdown by the keys of the structure.  I remember reading somewhere it said that Coldfusion code can be put in Javascript just like HTML.  Here if I put like this

document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)

it gives me error.  

Thank you bwasyliuk.

valleytechAuthor Commented:
It seems to be that you could do away with the iframe based on what it is doing now - but if you are needing the iframe to process some cfquery(or other CF) tags based on the time selection, then I think you can make this work.

If you want to loop through the struct you have created and output the js, you can do something like:

<cfloop index = "curr_key" from = "1" to = "#StructCount(atime)#">
<cfoutput>document.apptform.available_time.options[#curr_key-1#] = new Option(#atime[curr_key]#);</cfoutput>

this would replace the following set of code in your original example:
for(i=0;i<<cfoutput>#listlen(timelist)#</cfoutput>;i++) {

        document.apptform.available_time.options[i] = new Option(<cfoutput>#atime[i]#</cfoutput>)
        //document.write('<option value=' + i + '>' + i + '</option>');
valleytechAuthor Commented:
Thank you bwasyliuk.  That solves my problem :).

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now