Coldfusion in Javascript to populate a select dropdown

[lvbao]

Hello,

I have a select dropdown 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. The javascript would look like this:
document.formName.fieldName.options/[i/] = new Option(i+1)

if I replace (i+1) with a Coldfusion code, it gives me error:
document.apptform.available_time.options/[i/] = new Option(<cfoutput>#atime/[i+1/]#</cfoutput>)
(I have to escape /[i/] otherwise it doesn't show here.)

Can someone 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

#</option>">
</cfloop>
--->
if (currVal == 'all') {


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

#</cfoutput></cfloop>")--->


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


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


} else {
alert("testing")
// this will query the database to select the right option.
}
}

[Newsgroup_User]

You are trying to run ColdFusion on the client. It does not work there,
ColdFusion only works on the server. Once the http request has been
sent to the client, you use client technology like JavaScript. If you
want to query the sever without doing a page refresh, you are looking at
AJAX/FLEX type technology.


lvbao wrote:
> Hello,
>
> I have a select dropdown 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. The javascript would look like this:
> document.formName.fieldName.options = new Option(i+1)
>
> if I replace (i+1) with a Coldfusion code, it gives me error:
> document.apptform.available_time.options = new
> Option(<cfoutput>#atime #</cfoutput>)
>
> Can someone 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

#</option>">
> </cfloop>
> --->
> if (currVal == 'all') {
>
>
> <!---alert("<cfloop list='#timelist#'
> index='num'><cfoutput>#atime

#</cfoutput></cfloop>")--->
>
>
> document.apptform.available_time.options.length = 0
> for(i=0;i<<cfoutput>#listlen(timelist)#</cfoutput>;i++) {
>
>
> document.apptform.available_time.options = new
> Option(<cfoutput>#atime#</cfoutput>)
> //document.write('<option value=' + i + '>' + i + '</option>');
> }
>
>
> } else {
> alert("testing")
> // this will query the database to select the right option.
> }
> }
>

[lvbao]

Thank you Ian for pointing it out. I read it somewhere that Coldfusion can be put in Javascript just like HTML.

[lvbao]

On the second thought, right now I process Coldfusion code in the Javascript in the main document. What if I process Coldfusion code in the hidden Iframe and pass the result back to the Javascript 'handleResponse' function to display in the main document, will that work? Thank you in advance.

Regards

[Newsgroup_User]

Just to, hopefully, clear up your first statement. You run ColdFusion
on the server that builds JavaScript code that is sent to the client to
be processed. It is important to understand this two step process.
When the ColdFusion code is running, the JavaScript is not doing
anything. Once the request is back at the client, the ColdFusion is all
done, and the JavaScript runs separate of any ColdFusion happenings on
the server.

So with this understanding, yes a new request for the IFrame can easily
run ColdFusion code on the server that generates data that is then
passed back to the page in the return request. Then other JavaScript
can then access this data inside the IFrame.

I can only tell that it is possible, I have never had to work with this
kind of complexity, so I have no advice on how to tie it all together
and implement it, just that it can be done.

lvbao wrote:
> On the second thought, right now I process Coldfusion code in the Javascript in
> the main document. What if I process Coldfusion code in the hidden Iframe and
> pass the result back to the Javascript 'handleResponse' function to display in
> the main document, will that work? Thank you in advance.
>
> Regards
>

[The_ScareCrow]

All you need to do is move the javascript that populates the drop down to the page in the iframe.
Then the js will be something like the attached.

Couple of notes:
The option menu starts at zero while the cfloop starts at one, thus the need for the js variable idx.
By appending the key word "parent" to the path of the drop list, this indicates the parent window.
In this case the window which contains the iframe.

Ken

[Keiko]

Hi lvbao,

You can try this example. It is a bit messy to embed coldfusion tag inside javascript. I won't recommend the approach. But if you think it is useful, then you can make use of it.


<cfquery datasource="rnd" name="qryEmployee">
select * from employee
</cfquery>

<script language="javascript">
function SelectEmployee() {
var strHTML;
strHTML = "";
strHTML = strHTML + "<select name='cboEmployee'>";
strHTML = strHTML + " <cfoutput query='qryEmployee'>";
strHTML = strHTML + " <option value='#qryEmployee.Employee_ID#'>#qryEmployee.Employee_Name#</option>";
strHTML = strHTML + " </cfoutput>";
strHTML = strHTML + "</select>";
divEmployee.innerHTML = strHTML;
}
</script>

<body onload="SelectEmployee()">
<div id="divEmployee"></div>
</body>


Hope it helps
Keiko

[Newsgroup_User]

That CFML will never be run. Once the JavaScript is working the request
is on the client. That will just put CFML code into the document and
most of it will be invisible because of the brackets "<>" unless one
looks at the source code in the browser. But the client will never run it.

Keiko wrote:
> Hi lvbao,
>
> You can try this example. It is a bit messy to embed coldfusion tag inside
> javascript. I won't recommend the approach. But if you think it is useful, then
> you can make use of it.
>
>
> <cfquery datasource="rnd" name="qryEmployee">
> select * from employee
> </cfquery>
>
> <script language="javascript">
> function SelectEmployee() {
> var strHTML;
> strHTML = "";
> strHTML = strHTML + "<select name='cboEmployee'>";
> strHTML = strHTML + " <cfoutput query='qryEmployee'>";
> strHTML = strHTML + " <option
> value='#qryEmployee.Employee_ID#'>#qryEmployee.Employee_Name#</option>";
> strHTML = strHTML + " </cfoutput>";
> strHTML = strHTML + "</select>";
> divEmployee.innerHTML = strHTML;
> }
> </script>
>
> <body onload="SelectEmployee()">
> <div id="divEmployee"></div>
> </body>
>
>
> Hope it helps
> Keiko
>
>