I have a page with 5 ajax tabs on it. I've set it up like this:
$(document).ready(function(){
var shiptabs = $("#tabarea > ul").tabs(
{ selected: 0
, disabled:[2]
, spinner:''
, cache:true
, ajaxOptions: { cache: false }
, load: function(e,ui) {
handleTabLoad(ui);
}
, select: function(e,ui) {
handleTabSelect(ui);
}
, show: function(e,ui) {
handleTabShow(ui);
}
});
...
});
Notice that I've defined load, select and show functions which I've
name handleTabLoad( ), handleTabSelect( ), and handleShow ()
respectively.
For example, handleTabLoad will need to bind some click events to
links that will allow the user to go to a different tab.
Therefore I need to do something like
$('#locations_tab_link").bind("click",
function(){
foo.tabs('select',LOCATIONS_TAB);
return false; // don't submit form
}
);
My problem is that I can't determine how to get 'foo' from within
handleTabLoad().
If I follow the examples in the documentation and try this...
var $tabs = $('#example > ul').tabs(); // first tab selected
$('#locations_tab_link").click(function() {
$tabs.tabs('select', LOCATIONS_TAB);
return false;
});
... it appears that the tab control is re-initialized. That totally
breaks the web app.
If I pull my initial tab initialization outside of the $
(document).ready, how can I expose that tab control globally?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
