Tabs - Event order and specially 'show' event issues
Hey Everyone -
I have been working a lot with the Tabs widget lately and have noticed a few things that caused me trouble/confusion so I was hoping someone could help. Specifically I am using the tabs widget in a "popup"/"lightbox" by having it controlled by another element source to toggle its visibility and the tabs are loaded via the Tabs ajax option for lazy loading content.
The first is the ordering of the events which, as I always read the ordering always follows, is select -> load -> show. The first oddity I was hoping someone could answer is why when I use Tabs with an fx option enabled then everything works fine and the events follow in that order... but if I remove the option for any effects on tab switching does the order change from select (of course) -> show -> load. I figured most, since by default its off, dont use the fx option so it seems the default event ordering is consistently reversed from the expectations. I know they're asynchronous calls so I guess in the case it's a battle of the timing it takes between the fickle ajax call and the static timing on the fx animation. But isn't this still a bit odd or could have been avoided by handling callbacks better in the source?
The second question/actual problem is partly related but specifically about the "show" event. I needed to add a reload capability to my implementation of the tabs which was nothing more than just simple calling .tabs('load', requestedIndex). I take care of all my binding for my UI on the load callback that I set when initializing the tabs. But here is what is giving me a problem... when you call 'load' it does not trigger the 'show' callback I set when initializing as well. I recently needed to add bindings in the content, for in this case, adding a jQuery UI accordion which needs the full height of its parent for initializing since I use it with the option fillSpace set to true. But creating the accordion with the rest of my bindings in the load callback did not work because it tries initializing the accordion before the tab is shown so it starts collapsed due to incorrect heights. When I move the bindings/call to initialize the accordion to the 'show' callback it works like a charm since it occurs after the content is displayed. So this was perfect except my catch 22 of needing to reload a tab... calling reload does not trigger show. So lets say someone clicks a button on my site to open my "tab lightbox"... switching back and forth between tabs the accordion works just fine because the 'show' event is triggered. But I basically lightly wrapped the tabs functionality to my own interface and one option is to specify which tab index as an argument for displaying the "tab lightbox"... so it is quite possible that when someone clicks to open it, they will try opening the same tab and I want to content to refresh via ajax as well no matter what like the others. So basically the only way I could do this was by storing the last tab index viewed and if the current one being selected is the same then it called 'load' instead of 'select' since 'select' wouldn't work anyway detecting that the tab is already active but its previous state was simply hidden. So in this situation of opening the "tab lightbox" to the same tab and trying to reload content... the accordion never can initialize in this situation since my 'show' callback isnt triggered.
Any tricks to get around this other than getting desperate and adding a setTimeout of a second or two to my load callback which always works?... but obviously I don't want to do it in such a sloppy way as that. And is there any good reason why the 'show' callback shouldn't be fired as well from the queue when content is manually reloaded using 'load'? It seems that if you're letting people manually reload content by offering that option then triggering the 'show' event and callback seems like it should naturally occur since, well, after it loads the content will be shown so why not? Any info or tricks would be greatly, greatly appreciated. Thanks!