AJAX Tab question

[Guest]

Hi All,

I have CF 8 Standard and have used the Ajax tabs (I suppose these are from Yahoo). I have been able to properly display tabs on my CFM page and the users are able to navigate using these tabs. Is there a way for me to know what tab the user clicks? I have a common area (like a <div>) above the tabs. I would like to show relevant information in the DIV depending on the tab the user clicks on.

Thanks.

- Milind Joshi

[Guest]

I'm answering my own question. Giving it here so if anyone else was in similar situation, he/she would know what to do. My requirement was to capture the tabchange event. I wanted to know what tab the user navigated to.

Here's what I did:

1) Put following line almost at the end of the page.

<cfset AjaxOnLoad("loadTabListener")>

This fires the function loadTabListener when the page is gets loaded in the browser.

2) Put this in the header block. This returns an Ext JavaScript object. The second line adds an event listener to the Ext JavaScript object named "datatabs" and fires the event handler.

loadTabListener = function() {
   tabObj = ColdFusion.Layout.getTabLayout("datatabs");
   tabObj.addListener('tabchange', getClickedTab);
}

3) Put these lines of code below the above declaration.

getClickedTab = function(objParent, objPanel) {
   //objPanel.getText() gives you the title of the tab.

   parent.showMenu(objPanel.getText());

}

Now, you can do whatever you want to do depending on what tab the user navigated to. In my case, I wanted to dynamically change the hyperlinks in a certain area depending on what tab the user was. For more info on the JS libraries used for tabs CF go to http://www.extjs.com/deploy/ext/docs/

Bye for now.

- Milind