Let me try to better explain what I'm trying to do.
I have a page that has 5 tabs on it. These tabs are loaded via Ajax.
Each loaded tab can contain a relatively complex form. These forms
also use AJAX.
Some of these forms contain help text that may refer a user to
features in another tab. I'd like to include links in the help text
that can be used as tab switch shortcuts. The UI Tabs docs give an
example of how to do this.
var $tabs = $('#example > ul').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
The problem I'm having is that if declare that first line when I load
a tab that has the help text, it appears that it it totally
reinitializing the tab object.
I note that .tabs' load, select, and show option functions do have
visibility to "ui". I've changed my initialization code to this:
var $tabs = $("#tabarea > ul").tabs(
{ selected: 0
, disabled:[2]
, spinner:''
, cache:true
, ajaxOptions: { cache: false }
, load: function(e,ui) {
handleTabLoad(ui); // this doesn't =
$tabs?
}
, select: function(e,ui) {
handleTabSelect(ui);
}
, show: function(e,ui) {
handleTabShow(ui);
}
});
My hope was that passing ui to handleTabLoad would somehow provide a
reference to that tab control so that I could do something like this:
$('#my-text-link').click(function() { // bind click event to link
tabctl.tabs('select', 2); // switch to third tab, where tabctl was
determined from ui
return false;
});
I've poked around with Firebug, but I'm not seeing what I need.
Any ideas would be appreciated.
On Sep 10, 12:01 pm, I wrote:
> I have the following uiTabs initialization code in my $
> (document).ready function:
>
> var $tabs = $("#tabarea > ul").tabs(
> { selected: 0
> , disabled:[2]
> , spinner:''
> , cache:true
> , ajaxOptions: { cache: false }
> , load: function(e,ui) {
> handleTabLoad(ui.index,this); // this doesn't
> = $tabs?
> }
> , select: function(e,ui) {
> handleTabSelect(ui.index);
> }
> , show: function(e,ui) {
> handleTabShow(ui.index);
> }
> });
>
> I've created functions to handle tab loading, selecting, etc. For
> example handleTabLoad will to be able to do reference $tabs?
>
> The problem I'm having is that in the handleTabLoad function I need a
> reference to the tab area that is being initialized. Is that possible?
