Preselecting a tab via the URL in ColdFusion 8

A quick and simple tip - ColdFusion 8 lets you set a default selected tab by using selected="true" in the tab. Here is a simple example:

<cflayout type="tab">

<cflayoutarea title="Tab 1"> <p> This is the first tab. </p> </cflayoutarea>

<cflayoutarea title="Tab 2" selected="true"> <p> This is the second tab. </p> </cflayoutarea>

</cflayout>

In this example, the second tab will be selected when the page loads, as opposed to the first one which is the default. But what if you wanted more control over the selected tab? Here is a way to do it so that you can control the selected tab in the URL itself.

<cflayout type="tab">

<cflayoutarea title="Tab 1" selected="#isDefined('url.tab1')#"> <p> This is my tab. There are many like it but this one is mine. My tab is my best friend. It is my life. I must master it as I must master my life. Without me, my tab is useless. Without my tab I am useless. I must fire my tab true. I must shoot straighter than my enemy, who is trying to kill me. I must shoot him before he shoots me. I will. Before God I swear this creed: my tab and myself are defenders of my country, we are the masters of my enemy, we are the saviors of my life. So be it, until there is no enemy, but peace. Amen. </p> </cflayoutarea>

<cflayoutarea title="Tab 2" selected="#isDefined('url.tab2')#"> <p> This is the second tab. </p> </cflayoutarea>

</cflayout>

In this example, each tab has a selected attribute that looks like so:

selected="#isDefined('url.tabX')#"

To load the page with tab 2 selected, you would simply go to this URL:

http://localhost/test.cfm?tab2

Notice that you don't need to actually pass a value as the code just checks for the existence of the value.

Archived Comments

Comment 1 by todd sharp posted on 8/8/2007 at 5:32 PM

You scare me sometimes man... ;)

Comment 2 by Charlie Arehart posted on 8/8/2007 at 8:52 PM

Cool tip, but I was hoping (by the title) that you might have the answer to "how to jump to a tab from the URL" if the site has NOT implemented such a technique as yours. To me, this is a bit of a limitation about these tabbed interfaces that I was thinking of writing about myself.

For instance, let's say I wanted to tell someone to go view the "why upgrade" info on the new CF front page (http://www.adobe.com/produc.... Sadly, one has to tell them to click the tab. I wish, instead, there was some URL we could offer so people could jump right to it.

Are we missing something?

But thanks for the work-around for those who may implement the feature on their own site.

Comment 3 by Raymond Camden posted on 8/8/2007 at 9:01 PM

I may not be reading you right. My technique would allow you to do what you said - it just requires the programmer to do his work on the back end.

Comment 4 by Jeff posted on 8/14/2007 at 1:51 AM

Nice, this will be a great new feature to use as I have used tabs a lot lately in the apps I am developing.

Comment 5 by George Fallar posted on 2/24/2008 at 6:29 AM

Dude...

You probably just saved me two hours of trial and error trying to figure this out. And, thankfully, the solution doesn't require a descent into javascript hell.

You da man! Thanks.

g

Comment 6 by Don posted on 9/3/2009 at 10:55 PM

Another way old comment. Why can't I do something like this :
<cfif session.here = "thisTab">selected="true"</cfif>
I do this and I get an error saying "Invalid Token 'c'"
But maybe I can adapt your method.

Comment 7 by Raymond Camden posted on 9/3/2009 at 10:56 PM

You can't put a CFIF inside a cf tag. You could do

select="#session.here is 'thisTag'#"

Comment 8 by Don posted on 9/3/2009 at 11:06 PM

Hmmmm. Just move the cfif outside the layoutarea tag. That'll work.

Comment 9 by victor Dias posted on 11/5/2011 at 12:13 AM

Nice twist on Full Metal Jacket ;-)

Comment 10 by Raymond Camden posted on 11/5/2011 at 12:16 AM

You were the first to notice. :)

Comment 11 by ks posted on 9/20/2012 at 6:52 PM

Simple and elegant - love your blog!