Ask a Jedi: Running code on Tab change with ColdFusion 8 Tabs

Rob Featherpants asks:

I'm building ColdFusion sites again after a while away, and I wonder if you can help me with a little advice about cflayoutarea and tabs. I am building a tabbed interface as part of a form. Outside of the tabs is a textarea, with its height set as an inline style. I want to change this height when one of the tabs is selected and set a cookie to remember which tab was last active ... i.e. have onClick on the tab trigger a Javascript. Can I do this?

Yep, you can, although it does take a few lines of JavaScript. ColdFusion provides an API to get access to the underlying Ext based TabPanel object. You can get this object by running:

var mytabs = ColdFusion.Layout.getTabLayout('mytabs');

If you check the Ext docs for TabPanel, you will see there is an ‘on’ API call that lets you easily add event listeners. I used this:

mytabs.on('tabchange', function(tabpanel,activetab) { console.log('changed to a new tab '+activetab.getText()); })

The tabchange event passes the tabpanel object and the active tab. I defined a function that simply uses Firebug to log the text of the selected tab. Here is a complete example. Please note I use AjaxOnLoad to run the code to register the event:


<head> <script> function setup() { var mytabs = ColdFusion.Layout.getTabLayout(‘mytabs’); mytabs.on(‘tabchange’, function(tabpanel,activetab) { console.log(‘changed to a new tab ‘+activetab.getText()); }) } </script> </head>


<cflayout type=”tab” name=”mytabs”>

&lt;cflayoutarea title="Tab 1"&gt;
tab 1

&lt;cflayoutarea title="tab 2"&gt;
tab 2


</body> </html>

<cfset ajaxOnLoad(‘setup’)> </code>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA