Posted in ColdFusion | Posted on 12-01-2008 | 4,156 views
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:
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:
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:
2
3<head>
4<script>
5function setup() {
6 var mytabs = ColdFusion.Layout.getTabLayout('mytabs');
7 mytabs.on('tabchange', function(tabpanel,activetab) { console.log('changed to a new tab '+activetab.getText()); })
8}
9</script>
10</head>
11
12<body>
13
14<cflayout type="tab" name="mytabs">
15
16 <cflayoutarea title="Tab 1">
17 tab 1
18 </cflayoutarea>
19
20 <cflayoutarea title="tab 2">
21 tab 2
22 </cflayoutarea>
23
24</cflayout>
25
26</body>
27</html>
28
29<cfset ajaxOnLoad('setup')>
Quickly changed the status and an hour later, I had a very happy client.
Cheers!
</cliff>
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!
You have some func that runs every N seconds. You want it to work with the current tab. So if you switch tabs, the current interval should stop a new one should start.
Dumb q- why not use the same interval and have it check to see which tab is active?
I could use the same interval/function I suppose but how do I identify the active tab at any given moment?
I appreciate the assistance.
http://www.johncblandii.com/index.php/2008/03/cold...
His blog is a bit hard to read - but you can see where he gets the 'active' tab.
<script>
$(document).ready(function() {
function CheckAlerts() {
//Must tell Ajax not to cache results
$.ajaxSetup({ cache: false });
$.get("AjaxDataCheck/CheckForDataRefresh.cfm", { datacheck: "MyAlerts"},
function(data) {
if (data.indexOf("true") >= 0) {
$.ajaxSetup({ cache: false });
$('#responsecontainer').load('alertchecking_Inner.cfm');
//Clearing the timer and recreating may force gargage collection.
clearTimeout(CheckAlertsTimer);
delete CheckAlertsTimer;
CheckAlertsTimer = setTimeout(CheckAlerts,2000);
}
else
{
//Clearing the timer and recreating may force gargage collection.
clearTimeout(CheckAlertsTimer);
delete CheckAlertsTimer;
CheckAlertsTimer = setTimeout(CheckAlerts,2000);
}
});
CheckAlertsTimer = setTimeout(CheckAlerts,2000);
};
CheckAlerts()
});
</script>
Thanks!
[Add Comment] [Subscribe to Comments]