DevWebPro

Jay asks:

I have a select box and an iframe and I would like to change the content of the iframe based on what is selected in the select box. Is that possible?

So this one threw me for a bit because I couldn't honestly remember the last time I worked with an iframe. But I worked out a solution, and when I realized what a great opportunity this would be to showcase ColdFusion 8, I thought I'd share what I found. First though let's answer the original question. How do you change the contents of an iframe? You can set the src property of an iframe via JavaScript. Here is a super simple example:

<script>
function updateContent() {
   var foodd = document.getElementById("foo");
   var foovalue = foodd.options[foodd.selectedIndex].value;
   if(!foovalue) return;
   var myframe = document.getElementById("myiframe");
   myframe.src = "ilayer.cfm?id="+foovalue;
}
</script>
<select id="foo" onChange="updateContent()">
<option></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<iframe id="myiframe" src="ilayer.cfm" />

What I've done is add a onChange event handler to my drop down box. This calls JavaScript code that then changes the src (location) of the iframe. The code for ilayer.cfm is:

<cfparam name="url.id" default="">

<cfif len(url.id)>
  <cfoutput>url.id is #url.id#</cfoutput>
</cfif>

All I'm doing is echoing back the value of URL.ID. So... pretty simple. But what is cool is how much easier this gets in ColdFusion 8. Let's look at a sample:

<select id="foo">
<option></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<cfdiv bind="url:ilayer.cfm?id={foo}" width="200" height="200" />

So first off - no more JavaScript. At all. Me likely. I changed the iframe to a cfdiv, and to be honest, this looks a bit different from the iframe, but I'm sure you could CSS it up a bit. Lastly, I added a bind to the cfdiv. When I change my drop down (foo), the div generated by ColdFusion will notice the change and pass the value along.

Comments