Hi Klaus,
After more investigation I figured out that the tab wasn't actually
being reinitialized. The problem was that when I was doing this ...
var $tabs = $('#example > ul').tabs(); // first tab selected
... to get the tab, I wasn't passing anything in, .e.g. var $tabs = $
('#example > ul').tabs(... nothing here ...). I suspect this was
resetting the some of the default behaviors.
What I've done since is created a global config object that I pass to
tabs on initialization and any time I need to get a reference to the
tab control, e.g.,
var $tabs = $('#example > ul').tabs(tabcfg); // first tab selected
Since this is a single page application I would like to grab and store
a global reference to the tab control on creation, instead of having
to get the reference each time I need it (which will be often). Is
there a way to do that?
I will also try your traverse suggestion.
Thanks for the other suggestions. I'll give them a try.
On Sep 11, 3:20 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> On Sep 10, 10:39 pm, Brad <[EMAIL PROTECTED]> wrote:
>
>
>
> > 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;
>
> > });
>
> I were suggesting this, but I'm also thinking that it may make sense
> to attach the jQuery object to the ui object passed to the callback.
>
> > ... it appears that the tab control is re-initialized. That totally
> > breaks the web app.
>
> That shouldn't be the case and isn't on my test page. Do you use
> latest versions (even though I'm not aware of any related bug)?
>
> You can try the following though (traverse from tab to its parent ul
> element):
>
> function handleTabLoad(ui) {
> $('#locations_tab_link').bind('click',
> function() {
> $(ui.tab).parents('ul:first').tabs('select',
> LOCATIONS_TAB);
> return false; // don't submit form
> }
> );
>
> }
>
> By the way, you don't really need to wrap another anonymous function
> around handleTabLoad etc. As you already have a named function that's
> a perfect reference:
>
> ...
> load: handleTabLoad,
> select: handleTabSelect,
> ...
>
> You then only need to adapt the function arguments:
>
> function handleTabLoad(e, ui) {
> ...
>
> }
>
> --Klaus
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
