Solved

Use Coldfusion in Javascript to populate a Select Dropdown

Posted on 2006-07-03
5
375 Views
Last Modified: 2013-12-24
Hello,

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>">
</cfloop>
--->

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 {
  alert("testing")
}
}
0
Comment
Question by:valleytech
  • 3
  • 2
5 Comments
 
LVL 7

Expert Comment

by:bwasyliuk
ID: 17039370
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?
0
 

Author Comment

by:valleytech
ID: 17040442
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);
                     document.getElementById('available_time').disabled=false;">
   <option value="">[Select]</option>
  <option value="all">All</option>
<cfoutput query="GetEmployees">
  <option value= "#GetEmployees.NICK_NAME#">#GetEmployees.NICK_NAME#</option>
</cfoutput>
</select>

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#'>
</cfif>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
  window.parent.handleResponse("<cfoutput>#time#</cfoutput>")
 
</script>

</head>

<body>

</body>
</html>

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.

Regards
0
 

Author Comment

by:valleytech
ID: 17040467
0
 
LVL 7

Accepted Solution

by:
bwasyliuk earned 125 total points
ID: 17043589
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>
</cfloop>

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>');
  }
0
 

Author Comment

by:valleytech
ID: 17046254
Thank you bwasyliuk.  That solves my problem :).
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now