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:
<html>
<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>
<body>
<cflayout type="tab" name="mytabs">
<cflayoutarea title="Tab 1">
tab 1
</cflayoutarea>
<cflayoutarea title="tab 2">
tab 2
</cflayoutarea>
</cflayout>
</body>
</html>
<cfset ajaxOnLoad('setup')>
Comments
This AJAX stuff is cool and adds great depth to CF, but of course there is much more to learn, as the black box tags only go so far.
Also, it seems that there are a lot of gotchas with the tags themselves. I don't seem to be able to use cfcalendar within my cfdivs, and cfinput and cftextarea validation is ignored, in spite of importing the tags into the calling page. A lot of trial and error ahead!
Quickly changed the status and an hour later, I had a very happy client.
Cheers!
</cliff>