Question reguarding a Drop Down Control Referencing a Frame Control

, ,
1

In my CAF portlet I have a Frame Control that is being used to display external web pages. Currently I have a series of Icon Controls that when one is selected causes an external web page to be displayed in the Frame Control and each Icon Control references a different external web page. Instead of using the series of Icon Controls to make these selections I would like to use a Drop Down Control to make the selections.

Is this possible to do?

If so how?

Any ideas will be appreciated.

2

Sure,

You should be able to use some javascript code in the ‘Client-Side Events > Change’ property of the dropdown control to change the current page being displayed in the frame to match the current selection.

3

I am new at this, only a few weeks, so I have couple of couple of followup questions:

1 - How do I know what item in the drop down was selected (i.e. what do I test for)?

2 - How do I reference the frame? Using the Icon Control as a selector I put the desired URL in the Target parameter. How is this done from a Javascript?

Thanks.

4

In your ‘change’ event handler code, you would basically be using regular html/javascript techniques. There isn’t much different while using CAF at this point.

For example, something like this as the value of the ‘Client-Side Events > Change’ property of the dropdown control:


// the 'this' variable would be the dropdown element that changed, you can get the current value from that.
var value = this.value;

//get the iframe by the id, and change the src property of the iframe to the new value
var frameId = '#{caf:cid("myframe")}';
var iframe = document.getElementById(frameId); 
iframe.src = value;
5

It was the this.value and the ‘#{caf:cid(“myframe”)}’ lines that I was trying to figure out.

A tremendous help.
Thanks!