Yesterday I blogged about layouts in ColdFusion 8. This was accomplished with the handy cflayoutarea and cflayout tags. Today's post will use the same tabs but deal with tabs. (No, not bar tabs.) I'm a big fan of tabs for breaking up complex forms, so I'm happy to see this baked into the product.
Let's start with a simple example:
<cflayout type="tab">
<cflayoutarea title="Tab 1">
This is the first tab.
</cflayoutarea>
<cflayoutarea title="Tab 2">
This is the second tab.
</cflayoutarea>
</cflayout>
As you can see - this uses the same tags discussed in the previous post, except this time I used a type of tab. Insdie a tab based layout, all cflayoutarea groups will create a tab. The titles of the layoutareas will be the titles of the tabs. You can see a live demo of this here.
Building basic tab sets is trivial enough. ColdFusion provides many options for the tabs as well. As an example, you can supply a tab height to the layout control like so:
<cflayout type="tab" tabheight="100">
<cflayoutarea title="Tab 1">
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
</cflayoutarea>
<cflayoutarea title="Tab 2">
This is the second tab.
</cflayoutarea>
</cflayout>
This will set the height for the tabs. The content in the tabs will automatically scroll if they need to. (If for some reason you don't want this, you can set the overflow attribute to hidden.) The code above can be seen here.
You can also set the tabs to display at the bottom:
<cflayout type="tab" tabheight="100" tabPosition="bottom">
By default, the first tab is selected, but you can also specify a default tab in the code:
<cflayoutarea title="Tab 2" selected="true">
You can even disable a tab if you want:
<cflayoutarea title="Tab 2" disabled="true">
Along with all of these options, there is a nice JavaScript API to work with the tabs. You can select a tab. You can enable or disable tabs. You can even hide or show a tab (although this wasn't working for me so I assume it is currently buggy). For an example of all of this (including the buggy show/hide code), see this final demo. The code for this demo is:
<cflayout type="tab" tabheight="100" name="mytabs">
<cflayoutarea title="Tab 1" name="t1">
<p>
This is the first tab.
</p>
<p>
<form>
<select onChange="if(this.selectedIndex != 0) ColdFusion.Layout.selectTab('t' + this.options[this.selectedIndex].value,'mytabs')">
<option></option>
<cfloop index="x" from="2" to="5">
<cfoutput>
<option value="#x#">Select tab #x#</option>
</cfoutput>
</cfloop>
</select>
</p>
<p>
<a href="javaScript:ColdFusion.Layout.showTab('hiddentab','mytabs')">Show Hidden Tab</a> /
<a href="javaScript:ColdFusion.Layout.hideTab('hiddentab','mytabs')">Hide Hidden Tab</a>
</p>
</cflayoutarea>
<cfloop index="x" from="2" to="5">
<cflayoutarea title="Tab #x#" name="t#x#">
<cfoutput>
<p>
This is tab number #x#.
</p>
</cfoutput>
</cflayoutarea>
</cfloop>
<cflayoutarea title="Dharma Tab" name="hiddentab" inithide="true">
This is the hidden tab. Can't touch this.
</cflayoutarea>
</cflayout>
Archived Comments
I get an error when I click on 'show hidden tab.'
Oh wow... this will be one of the first things i will be using when i get CF8. I have an application that has many pages of forms that would work perfect in a tabbed layout.
Now can each tab submit it's form content via Ajax to a CFC that inserts it into a database? Maybe on each tab change submit that tabs data?
I was thinking of converting the application i am talking about to Flex, but now i see this maybe i will keep it CF.
Um, Gary, did you see where I mentioned this was buggy? :)
Is there any provision for doing the tabs server side?
I have seen situations where each tab has a good amount of processing on them, and if the tabs are all loaded and changed client side, you can end up with ALOT of process to present the tabs.
Does <cflayout> have a runat="server" or something like that?
The last demo is getting JavaScript errors in Firefox 2.0 when one click on the links on tab #1.
Interesting...when the last demo errors on clicking the "show tab" link, the JavaScript debugger says the error is "_198.unhideTab is not a function" and provides a link to the cflayout.js file on the coldfusionjedi site...which I could then click on and open in a view source window (that's surprising and a bit disturbing).
I did a search in that source window for an unhideTab function, and yep, there's doesn't seem to be one, at least in that particular file.
Not the most readable JavaScript code I've ever seen, that's for sure.
Brian - why is it disturbing that you could read the JS code? Thats normal. And the JS code is supposed to be optimized for speed, not readability (although I don't know if the JS code is completely optimized yet).
Patrick: Yes - please see my blog entry where I note that the show/hide tab API seems currently broken. :)
Does cflayout replace Spry TabbedPanels?
If so, how much of cf8 will be replacing various Spry tags?
David - no - this is all ajax based code.
Phillip - Yes and No. The beauty of these UI controls is that they make it bran dead simple. While there are plenty of options with them, if you want 100% control, you need to use your own controls. Spry would make that rather easy.
I plan on blogging about cfsprydataset later this month. (Too many darn features!)
Ray, you're right: it's perfectly normal for the debugger to show the JS file. Don't know why it struck me as being odd: maybe the official Adobe statement at the top of it that threw me off a bit.
And yeah, I understand that optimization should trump readability, but readability is still nice to have. Not a criticism of CF8 (or Adobe, or apple pie, or whatever), just a personal preference.
I disagree Brian. I think most frameworks ship 2 versions. A fat readable version and a skinny impossible to read one for production. The goal isn't to hide code by making it ugly, but to trim down the size as much as possible.
Chad, 2 possible answers. First, AjaxLink lets you link and keep inside a layoutarea. Secondly, there is a ColdFusion.Ajax.submitForm JS function.
Yes, it's brain-dead simple... and to be fair, you should probably mention that the first example also adds ten additional javascript and css files (about 325K) to the weight of your page. TANSTAAFL.
And to be fair - this is still a RC. Adobe knows they need to do some scrunching on the JS files.
True. But as a dedicated HTML/JS/CSS solution to this can be done in about 2K, that code is going to need a lot of scrunching.
Really, we're back to the old argument of heavyweight frameworks vs. lightwieght specialized code and which one is better suited to the problem at hand.
Either way, one should know the advantages--and disadvantages--of their choice.
The error with the tabs is a simple fix.
And the problem is that Ray put the values around the wrong way, oh well.
Here is the new code that works.
<a href="javaScript:ColdFusion.Layout.showTab('mytabs','hiddentab')">Show Hidden Tab</a> /
<a href="javaScript:ColdFusion.Layout.hideTab('mytabs','hiddentab')">Hide Hidden Tab</a>
Andrew, not quite sure if you meant anything by the "oh well", but I'm as perfect as the next person. ;)
So I took a look at the docs again, and it really seems unclear, but after rereading it twice - it does seem like the syntax is group/tab, not tab/group. I can file a doc bug to make this a bit clearer.
No Ray, it wasn't a dig at you. More to the fact that I know that the docs could have been wrong.
Bug in Safari - only the 5 tabs are displaying. The picklist is not showing up at all.
I can confirm that. Please log a bug Lola.
Done . . .
Something I do not like about the height of the tabs.
The tab should be resizable as default giving chance to customize height and eventually scrollbar.
From my test the tab start with a default height ( looks like about 100px) and this reduce the possibility to be used without the orrible scrollbar.
If tab 1 has 5 lines of text and tab 2 25 lines I have 2 options:
1)Fix the height of the two tabs regarding the longest but tab 1 will be 85% white
2)let the tag add the scrollbars.
However there should be no way to be sure to avoid scollbars in dynamic context:
I 'd like to see tab resizable as default with no height limit ( as most tab scripts now in use) and attributes like tabheight with a reative scrollbar yes no.
Hope is all clear
Nowone noted the same situation or I miss something?
Andrea
what if you want a multiple tab layout and a single form for all of the tabs? I have a cflayout type="tab" and four cflayoutareas, one for each tab. but I want it all wrapped up in a single form with a single submit button at the bottom. In flash forms, this is a no-brainer. Using Ajax UI I'm having trouble getting it to save the form data and I was wondering if there was a trick to getting it to work. I tried both ways I know, with a simple submit button and I tried a button with an onclick="ColdFusion.Ajax.submitForm..." command and nothin happens when I click. Also, I should say that the tab layout is pulled into a cfdiv tag from a ColdFusion.navigate link
Michael - I haven't tried that before. When I get time - I'll try to whip up a demo. Obviously the N step form is one of the intended uses for the tabs I think.
I found a simplified example (sort of) here: http://www.mollerus.net/tom...
I'm making progress, I think it's working now. Normal submit button and a cfunclude #Session.Source# on the bottom of the processing page
oh, and I mentioned in another post of yours that there are four "skins" for the tabs and windows stuff, default, gray, aero and vista. the may be in a separate set of directories but I am using something like this in the head section: <LINK href="/CFIDE/scripts/ajax/ext/resources/css/tabsAero.css" rel="stylesheet" type="text/css">
The tabsAero.css is just a copy of the tabs.css with the links to the image files changed.
it's not perfect but it's better than making a global change to all the tabs, windows.
Nice link.
When I'm in a CFLAYOUT's tab, and submit form variables to an action page (outside of CFLAYOUT) which uses CFLOCATION to return user to the original tab (after some processing), the session and other variables are unavailable on the tab, and any subsequent activity on the tab acts very strangely.
I built a sample app to show the problems here.
TRY THIS WITH THE CODE BELOW:
start on Tab3. click Edit Mode, which correctly remains on tab 3. submit any text, which is submitted to the Action.cfm page, an you are CFLOCATION'd back to Tab3. However at this point in MY application (the real project his sample is debugging), all session variables would be unavailable to code processing on tab3 right now (variable not defined error). Regardless, NOW click Edit Mode again (the second time) and note how screwy things get. You leave the CFLAYOUT framework and go directly to the tab's page.
I think CFLAYOUT has a fundamental bug that manifests when users are CFLOCATION'd back to a tab after processing. Maybe the tab's page doesn't know to remind the browser that there is a parent CFLAYOUT template (but i thought that's what the CFFORM tag is doing!!). The only way I can think to fix this is to CFLOCATION back to the original page with the CFLAYOUT tag, and then (using URL params and CFIFs) decide which tab is "SELECTED". But when I do that, i get a Javascript error like: "Error processing JavaScript in markup for element cf_layoutarea1200957715744: ...."
Attach Code
<!--- cflayouttest.cfm --->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cflayout test</title>
</head>
<body>
<CFAJAXIMPORT TAGS="cflayout-tab,cfform">
<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">
<CFLAYOUTAREA TITLE="TESTING Tab 1" SOURCE="cflayouttest-tab1.cfm"></CFLAYOUTAREA>
<CFLAYOUTAREA TITLE="TESTING Tab 2" SOURCE="cflayouttest-tab2.cfm"></CFLAYOUTAREA>
<CFLAYOUTAREA TITLE="TESTING Tab 3" SOURCE="cflayouttest-tab3.cfm"></CFLAYOUTAREA>
</CFLAYOUT>
<br />
<br />
<font size="-2">
Note:If you use CFAJAXIMPORT and use CFFORM for the form tags, then you don't need to SELECTED the CFLAYOUTAREA tags, since CFFORM does it for you.
</font>
</body>
</html>
<!--- cflayouttest-actions.cfm --->
<h1>CF Layout Test - actions</h1>
<CFSWITCH EXPRESSION="#FORM.EDIT#">
<CFCASE VALUE="SUBMIT-TAB1">
tab1
<CFDUMP VAR="#FORM#">
<CFLOCATION URL="cflayouttest-tab1.cfm">
</CFCASE>
<CFCASE VALUE="SUBMIT-TAB2">
tab2
<CFDUMP VAR="#FORM#">
<CFLOCATION URL="cflayouttest-tab2.cfm">
</CFCASE>
<CFCASE VALUE="SUBMIT-TAB3">
tab3
<CFDUMP VAR="#FORM#">
<CFLOCATION URL="cflayouttest-tab3.cfm">
</CFCASE>
</CFSWITCH>
<!---cflayouttest-tab1.cfm--->
CF Layout Test - tab 1 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFIF form.edit EQ "VIEW MODE">
VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab1.cfm"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
<CFELSE>
EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB1" /><input type="text" name="TESTBOX" /></CFFORM>
</CFIF>
<!---cflayouttest-tab2.cfm--->
CF Layout Test - tab 2 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFIF form.edit EQ "VIEW MODE">
VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab2.cfm"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
<CFELSE>
EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB2" /><input type="text" name="TESTBOX" /></CFFORM>
</CFIF>
<!---cflayouttest-tab3.cfm--->
CF Layout Test - tab 3 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFIF form.edit EQ "VIEW MODE">
VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab3.cfm"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
<CFELSE>
EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB3" /><input type="text" name="TESTBOX" /></CFFORM>
</CFIF>
First off, please do not post such large quantities of code. I appreciate you sharing the code, but it is a bit much. ;)
When you use cfform inside cflayout, the form post will be asynchronous. Therefore, cflocation doesn't make sense. Your doing an Ajax based request and the result is a header saying 'go here', but that doesn't make sense in this context. What you need to do instead is something like this:
Use ColdFusion.Ajax.submitForm() to submit the form. This will let you capture the result and handle it. In that result, you can then do whatever. If you want the tab contents to change, you can ColdFusion.navigate.
I was able to change the background color of the tabs using the post by James Mount. However, i was wondering if it is possible to change the color/text on a per tab basis? I have a set of tabs, and each of those tabs may have a set of sub tabs.
I was able to set the background color of the selected tab (both levels) to blue by modifying the style to:
<pre><p>##myTabs .x-tabs-strip .on .x-tabs-right .x-tabs-left {background: ##D6EEFA no-repeat right 0px;}</p></pre>
I was also able to set the text color of the sub tabs to red by modifying the style to:
<pre><p>##subTabs .x-tabs-strip .x-tabs-text {color:##ff8080;}</p></pre>
My question is, can i just alter the text/color of a specific subtab? I tried using the same syntax as above, but does this not work since it's at the <cflayoutarea> level? Can you only modify the tabs at the <cflayout> level?
The first sub tab is coded:
<pre><p><cflayoutarea title="Sub Tab 1" name="st1"></p></pre>
However the code below does not work...
<pre><p>##st1 .x-tabs-strip .x-tabs-text {color:##ff8080;}</p></pre>
Any help is greatly appreciated, thanks!
Thought I'd clean it up, sorry about the first post...
I was wondering if it is possible to change the color/text on a per tab basis? I have a set of tabs, and each of those tabs may have a set of sub tabs.
I was able to set the background color of the selected tab (both levels) to blue by modifying the style to:
##myTabs .x-tabs-strip .on .x-tabs-right .x-tabs-left {background: ##D6EEFA no-repeat right 0px;}
I was also able to set the text color of the sub tabs to red by modifying the style to:
##subTabs .x-tabs-strip .x-tabs-text {color:##ff8080;}
My question is, can i just alter the text/color of a specific subtab? I tried using the same syntax as above, but does this not work since it's at the <cflayoutarea> level? Can you only modify the tabs at the <cflayout> level?
The first sub tab is coded:
<cflayoutarea title="Sub Tab 1" name="st1">
However the code below does not work...
##st1 .x-tabs-strip .x-tabs-text {color:##ff8080;}
Any help is greatly appreciated, thanks!
Are the tabs SEO friendly? Will a crawler see the content in all the tabs?
If the content is on the page then sure. If you use ajax to load the content in, then probably not.
I have a search box that I put into my pages as an include. This include contains tabs with forms on each tab. When I submit the forms, it posts to the tab, not the main page.
Is there a "target" attribute that I can use to post to the main, or parent .cfm page? (outside of the tabs)
If you want to do an ajax based form post, you have to either use cfform, or use ColdFusion.Ajax.submitForm()
hi ray
im using the spry tabbed pannels and from there i'm calling the cfnavigate function with onclick.
two lines from the js function:
var formUrl = "getcontent.cfm?tab="+id;
ColdFusion.navigate(formUrl,containerId,callbackHandler,errorHandler,method,formName);
in getcontent.cfm i'm using a cfswitch where i use the cfinclude tag to get the templates i want to include.
i'm somehow having problems with this includes (which are working just fine if called directly).
just one short question: is this the way to do it? if yes: how to control the caching of variables, the behaviour is somehow "unconstant"...
Well, your comment is a bit off topic as I'm talking about the CF8 Tabs, not Spry tabs. I'm not aware of any caching issues - but you could add a cfheader to the top of getcontent to pass out no-cache type directives to the request.
hi ray
thanks for the answer, and sorry for beeing offtopic.
<cfontopic>
would you advise people to change the spry tabs to cf8 tabs, is there any reason in doing so compared to the effort?
</cfontopic> ;-)
That's a great question nic.
Hi Ray, Great topic. Quick question...
When you resize the page, the tabs resize a little then get pushed off screen. Is there a way to get them to stack?
I have a page with a tree to the left of my tabs, when I resize the window I'm loosing the tabs and not getting a scroll bar or anything. Any thoughts?
Unfortunately, I can't think of anything to suggest. I would recommend upgrading to 801 if you haven't, as well as getting the latest cumulative hot fix. If none of these work, then definitely report a bug.
http://www.adobe.com/go/wish
Oh, and of course, if none of the above work, you can always stop using the built in tabs for CF8 and switch to jquery or Spry. Not to say 'give up', but if you need tabs and need this fixed like, in the next twenty minutes, then it may be your best option.
Thanks for your time, not to push off topic, but if I move away from the cflayout tabs and move more towards spry, can I still use the cfdiv bind to call other pages?
It was that aspect of the development that drew me in this direction in the first place. Thanks.
I don't know. :) I'd just try. ;)
Don't forget that Spry also has a cfdiv type thing to dynamically load simple text/html into a container, much like cfdiv.
I'm trying to use the source attribute of a cflayoutarea tab. The suggested syntax doesn't seem to work in that the source is a cfc, the code: source="products.cfc?method=findproducts{categoryID=#categoryID#}" but the error message gives: The CATEGORYID parameter to the findproducts function is required but was not passed in and the AJAX logger gives: error:bind: Bind failed, element not found: categoryID=5 ! Either it knows the categoryID or it doesn't!! Is there something I'm missing or is it a bug? Any help is much appreciated, thanks.
Your syntax is wrong. When doing binding, you do it around a variable that exists on the client, like a form field. You would only put it around the variable, like {categoryID}. Notice how you have
findprodcts{....}
That is not right. The proper syntax would be
products.cfc?method=findproducts&categoryid={categoryid}
Your second issue is the use of # in the url. That also doesn't make sense. Bindings are client side. When the user views the page, #categoryid# is turned into a hard coded value. So even if you had the right syntax, you would have, if categoryid is 1:
products.cfc?method=findproducts&categoryid={1}
Which again - doesn't make sense. If you do want a hard coded value, use the syntax above, minus the { and }.
Thanks Ray,
The tabs are dynamic as is the source from cfinvoke on a component and a cfloop on the query output, as follows <cflayoutarea title="#category#" refreshOnActivate="true" source="products.cfc?method=findproducts&categoryID=#categoryID#"> The secret appears to have been the & rather than the curly brackets - I don't think that is shown anywhere in the reference material! (Including all 3 volumes of the web application construction kit) This now works; however it simply puts the data from the cfc in the layout area apparently ignoring any attempts at formatting or positioning. cfoutput tags don't work/are ignored/table rows similarly - what's the secret this time?
Your help is much appreciated especially as I guess you're the other side of the world!
Having written that part of the CFWACK, I beg to differ. ;) Although I don't think we have a specific example of a cflayoutarea talking to a source, the concept is the same. You need a URL. Your URL wasn't valid. Bindings are for values alone. You had that wrong as well. (Not trying to be picky here - rereading that it seems overly critical, so take it with kindness. ;)
So you said formatting is ignored. How are you doing formatting? Remember when you say that the source for a layoutarea is some other URL, then _that_ url must return the formatting. Ie, you can't just return "Ray", but "<b>Ray</b>" if you want it bolded.
One more thing to remember. CFCs by default return content in WDDX format. In order to get plain text back to your layoutarea, you must add something else to your URL:
&returnFormat=plain
This tells CF to not WDDX encode the result.
Thanks for your help - not taken other than with deep gratitude! I still do think that there's no clear URL info; the dev guide gives source="/myapp/innersource/citywindow.cfm?cityname={inputform:city}" so my first attempts weren't too silly!!
All is much appreciated - I may well be back - a wet weekend looms, no point in being outside...
btw I get a returned mail message user unknown each time I send you a post!
I'm not sure why I can't figure this out and i didn't see another blog on this (Sorry if i missed it!)... I have an app with a bunch of tabs, each with their own form. I want to add an eventListener or something of that nature to the "onchange" attribute of the tab layout so the user is prompted before they switch to another to save their work if there were fields changed on the current tab... Do you have an example of this functionality? Even if they're prompted EVERY time regardless of fields being changed or not would get me one step closer. Thanks in advance to Ray or anyone else that can offer up some insight, much appreciated!
I'd try using ColdFusion.Layout.getTagLayout. This returns the Ext Tab object that drives the tabs. See if there is an API on there to handle tab changing. Ie, run this func when the tab changes.
Yeah, i tried that, i get the tabset object, but I still haven't found a way to fire off a javascript function when you click on a tab. The only documentation I've found has been either clicking on a link to switch tabs and call a function or calling functions when the tabs were built using javascript. I would think this should be easy, yet my hours of reasearch have lead to nothing! I wish there was an "onchange" event in the <cflayoutarea> tag, man that would have made life simple right now!
Did you ever get the onchange functionality working?
I just published my first little sprytabs tool. spry isn't really it... well with all the existing stuff which I needed to include it was quite a thing till it all work. What I really didn't managed to do is getting javascript functions via ajax to work. means I had to implent all the functions in the base file, so that they were already existing before getting the content via ajax. Here an example or two:
http://www.motorradhandel.c...
http://www.motorradhandel.c...
I have noticed that whenever using the TAB feature with <cflayout> that the rendering of the tabs is really slow in Firefox. You can actually see all the tabs and the content of each tab for a split few seconds until it all gets loaded into the browser.
Does anyone have a work-around for this problem? IE7 seems to handle it well but haven't tried it in previous versions. Here's an example:
http://24.150.135.186/wehl/html/index.cfm?fuseaction=clubhouse.&Team=Ducks
well who cares, that's just the js engine which is not fast enough yet. next gen. will be 100-1000 times quicker anyway (like chrome)...
I have noticed that the cf 8 ajax stuff is either buggy or slow. I've been combining it with JQuery and getting better results across the board in all browsers. It depends on the security and complexity trade offs. Here's the link for the latest JQuery tabls - http://stilbuero.de/jquery/....
Hi Ray,
I'm working with some AJAX UI code written for ColdFusion 8 and I'm running into problems with ColdFusion 9. The code
ColdFusion.Layout.hideTab('MyTabs','Edit');
Hides the tab, but not the area below the tab. I define my tab like this....
<cflayoutarea name="Edit" initHide="true" refreshOnActivate="true" source="index.cfm?event=company.detail&CFGRIDKEY={companyid}" title="Edit Company" />
showTab() works, but hideTab() does not. Any suggestion?
Unfortunately no. Sounds like a bug. I'd report it. Worse comes to worse, switch to jQuery UI's tabs.
Hi Ray,
In CF 8, hiding a tab, really hides it. In CF 9 you hide the tab, but you also need to explicitly call selectTab('TabName') function to change from the tab you've just hidden.
I'm upgrading a client from CF 8 to CF 9 and found the AJAX UI stuff has A LOT of problems. :-(
Thanks for your help.
Be sure to report this at the bug tracker.
Hi Ray and others - Could one of you please let me know if there is a way to nest tabs in such a way that the sub tabs are arranged vertically? First of all, do we have to option of vertical tabs in cflayout? Is there a work-around?
thanks
I assume you checked the CFML Reference. :) There are no vertical tabs. You can put tabs on the top or bottom. That's pretty much it for tabs.
I'm getting an error when selecting a tab on the main page from within a modal window. Is this a no-no or a known bug?
On the main page:
<cflayout name="accordionDashboard" type="accordion">
<cflayoutarea closable="true" name="tabCart" title="Your Current Project" selected="True">
In the modal window:
<script>
ColdFusion.Layout.selectTab('accordionDashboard','tabCart');
</script>
Error:
Error processing Javascript in markup for element actualProductGrid: ColdFusion.Layout.selectTab: Tab layout not found, id: accordionDashboard.
"actualProductGrid" is the modal window id.
AAAAAHHHHH!!!!! --- funny how you always find the problem while typing it out on a message forum.
Because I'm using type="Accordion" the javascript function is selectAccordion, not selectTab.
ColdFusion.Layout.selectAccordion('accordionDashboard','tabCart');
Well, I'll still post this so other people can find it.
I'm getting an error when selecting a tab on the main page from within a modal window. Is this a no-no or a known bug?
On the main page:
<cflayout name="accordionDashboard" type="accordion">
<cflayoutarea closable="true" name="tabCart" title="Your Current Project" selected="True">
In the modal window:
<script>
ColdFusion.Layout.selectTab('accordionDashboard','tabCart');
</script>
Error:
Error processing Javascript in markup for element actualProductGrid: ColdFusion.Layout.selectTab: Tab layout not found, id: accordionDashboard.
"actualProductGrid" is the modal window id.
AAAAAHHHHH!!!!! --- funny how you always find the problem while typing it out on a message forum.
Because I'm using type="Accordion" the javascript function is selectAccordion, not selectTab.
ColdFusion.Layout.selectAccordion('accordionDashboard','tabCart');
Well, I'll still post this so other people can find it.
Hi Ray,
Trying to do a simple thing that is escaping me for hours. I have a cflayout tab style and then a cflayoutarea wihtin each tab. I am having a problem getting the vertical scroll bar to appear when the data runs past the height. I have the sty;e="overflow:auto;" on both the cflayout and cflayoutarea tags. Any ideas?
As far as I know you _don't_ need to do anything to make the style overflow. I'd remove any CSS you have now to see if its conflicting.
Hi,
I am using Tabs inside tab,
1) when i load the page all the tabs get loaded it takes long processing time
2) on click of any thing on page it becomes unresposive in IE 7 where it works fine in Mozila.
Please suggest
Regards
Kisah
@Kishan: Not sure what to suggest. Does it work better if you remove tabs? If the CF8 tabs aren't performant for you, there are many other options if you don't mind doing them "manually" as opposed to with cflayout.
I found tabs to be unusably slow. Accordions, for some reason, load quicker. I'd only use tabs on an infrequently used page. I'm currently using accordions on a side bar that loads with every page and it works quick enough.
Is there a way to change the text of a tab with javascript?
I'd try messing with the style attribute of cflayoutarea, or tabheight perhaps.
I am new to ColdFusion....
I have two tabs on my form. When I refresh the page, I want the previously selected tab to still remain selected instead of the first one.
How can I find the current selected tab?
I gather from all the comments above that there isn't an 'OnChange' event for the tab. Should I be using jQuery UI Tabs instead of cflayout?
Actually you can get the tab object (ColdFusion.Layout.getTagLayout) and then add an event listener. You would need to persist the choice in someway - perhaps via a cookie.
Hi Ray,
I have a massive form that is separated into tabs. However due to the size of the form the whole page is slowish to load. Is it possible to load the page with the just the first tab showing and have the content of the others load while the user is staring at the first tab, or maybe when he clicks on them. Kinda like a paginated cfgrid perhaps..
Yes - the source attribute lets you delay loading it until the tab is activated.
I am actually going through the cflayout capabilities, and I just noticed what you said. As I understand it, instead of one parent form, I must have individual sub-forms in every tab which I can them submit en masse from the main part of the page using ColdFusion.Ajax.submitForm scripts. Is that right? Any strange behavior I should know of? Will the usuall cfinput validation messages show normally by using this method?
I don't believe the built in validation will work, nor submitForm as you need to get multiple form blocks together at once. To be honest, I don't use, or recommend, the ColdFusion UI stuff at all anymore.
I am getting issues while using cflayout tab in CF9. I was working fine in CF8 but issues with CF8. selected="true" is not working in CF9. Is there any other way to pre-select a tab?
Hi, Raymond, Thanks for your post. but all your posts link point to the comparison page. I can't see demo.
I don't run ColdFusion anymore so I don't have live demos. Sorry. :\
Also - I strongly, strongly, strongly urge you not to use any of the CF UI features.