Control.Tabs activeLink, how do I get the value?

I am trying to pass the current tab href or ID to a PHP page to load the default content for that tab. (many tabs have submenus.) The test text loads but the Control.Tabs.activeLink always comes back as "undefined". I've tried many permutations and this is the best result I've gotten. New to Javascript/Ajax, if that wasn't obvious. Heres the script as it stands:

new Control.Tabs('headertabs', { afterChange: function ContentTest(){  
   new Ajax.Updater('contentText', 'loadcontent.php',{ method: 'post', postBody: 'test=' + Control.Tabs.activeLink });
    }
    });

I'm sure it's something easy, just not easy for me, yet. Any help would be appreciated.

Posted September 17th, 2007 at 7:30pm by Jabberwocky

Hi Jabberwocky,

The activeLink function will return an object reference to the link itself, so that you can do a number of other things with it. If you just want the id of the active tab, try "activeLink.id", which will give you the id of the object returned by this function.

Note that you will probably need to call this function on a reference to your Control.Tabs instance, as it is possible to have multiple tab instances on a page and as such you must explicitly refer to the one you're operating on.

To sum up:

var myTabs = new Control.Tabs('headertabs', { afterChange: function ContentTest() {
  new Ajax.Updater('contentText', 'loadcontent.php', { method: 'post', postBody: 'test=' + myTabs.activeLink.id });  
  }  
});  

Posted September 18th, 2007 at 7:37am by bbodien

Thanks for the info. I tried this but now clicking on the tabs doesn't load any of Ajax.Updater content at all. Do I need to echo or somehow call the variable myTabs (whatever the javascript equivalent to that is.) Again trial and error is just frustrating, any additional assistance would be appreciated.

Posted September 18th, 2007 at 12:00pm by Jabberwocky

Aaargh, my original script works if postBody doesn't contain a variable. Even knowing the correct variable activeLink.id I can't get it to work. I can't get to work the var myTabs way either. The tabs work, and the sub links show and hide correctly, but no Ajax.Updater content loads.

I only have the one Control.Tabs instance on the page, all sub links are just standard href's arranged with CSS.

:(

Posted September 18th, 2007 at 7:19pm by Jabberwocky

Hi Jabberwocky,

Can you put your page online somewhere so I can see what's going on? It'd be much easier to debug that way.

Ben

Posted September 19th, 2007 at 6:18am by bbodien

Just upload a testing page... http://www.carterwilliam.com/tabstest.htm

thanks

Posted September 19th, 2007 at 7:04am by Jabberwocky

Okay, I've made a local copy (minus the php obviously but I can watch attempted calls to it via Firebug).

1. You haven't closed your head tag
2. You've misspelled the href value for your Introduction anchor as "into", so the initialisation of Control.Tabs is failing when it iterates over your links. (this manifested as a Prototype error which was a bit misleading, but some Firebug debugging magic soon found the cause)
3. This one is my fault, I should have picked up on this sooner! The afterChange property inherently passes an argument to your custom handler function, which is a reference to the new tab content container. You can therefore use this argument to get the id of the new tab quickly, and pass that to your php code. All without having to mess around with references to the tab object itself, like I was suggesting earlier. Apologies!
4. I've moved the tab code to the head and put it in an onload event handler so that we avoid the possibility of this script being parsed before the DOM is ready (this will only happen when the DOM gets much more complex, but it's best to be safe).

Give me your email address and I'll send over the corrected file.

Posted September 19th, 2007 at 8:24am by bbodien

PS - A quick fix for your border overflow issue in the tabs:

#headermenu ul li a {
  /* bottom padding reduced to 1px */
  padding: 4px 5px 1px 5px; 
}

Posted September 19th, 2007 at 8:28am by bbodien

If you didn't get my email via your website mine is Adam@ my website domain.

Thanks again.

(trying to avoid more spam...my domain name just got spoofed today, so all of those rejected emails coming in has spam on my mind) ....Would have prefered Spam, Spam, Spam and eggs.

Posted September 19th, 2007 at 9:15am by Jabberwocky

Mailed.

Happy coding!

Posted September 19th, 2007 at 9:26am by bbodien