Solved

Use Coldfusion in Javascript to populate a Select Dropdown

Posted on 2006-07-03
5
379 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

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IPA - can it be run on a web server? 3 223
WEB Service vs ??? 7 125
Need to redirect request from IIS server to old Apache Server. 3 155
UPLOAD FILE TO Web API USING POST 5 132
This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

713 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