What's the difference between .select, .show, and .load in jquery-ui tabs?

I see that there are three events fired when a tab is selected and I see the order in which the events are fired but I'm rather confused about which event to use or how these are truly different. If all three are fired, couldn't I just put my code in any of the events?

I must be missing something here. Can someone clarify?

So after messing with this more I'm going to share what I ended up doing in the hopes that it might help someone else.

I had to generate dynamic tabs based on data returned in an Ajax call. It's basically data by date where the tabs are the date and they display whatever data falls within that date.

Generating the tabs from the returned data was easy but I couldn't figure out how to write out the associated data. Finally (and I should have started here), I looked th开发者_开发技巧at the generated dom and noticed that a dynamically created tab also creates a div. Maybe that's obvious to some (it wasn't to me) and if it was in the documentation I missed it. Anyway, this code will generate tabs from an array and then append html to the associated div when the tab is clicked. I don't need all the variables but I thought that might make it more readable. Put the function for show before adding the tabs or it wont work!

var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
    show: function(event, ui) { 
        var selected = $tabs.tabs('option', 'selected');
        var _sessionDates = getSessionDates(sessionData.Sessions);
        var grid = buildGrid(_sessionDates[selected]);
        $('#' + _sessionDates[selected]).html(grid);
    }
});

$(_sessionDates).each(function(i, dayOfShow) {
    var d = dateFormat(dayOfShow, "mediumDate");
    $tabs.tabs('add', '#' + dayOfShow, d);
});

Finally, I have to "scroll" through my data shown in the tab and I was able to do that with these two lines. The first line gives me the id of the div element corresponding to the selected tab (which is really the important part) and the second line just calls my method and passes in the id of the div less the '#'. My date is also my id. There's a global variable that I've changed outside of this that makes it work. I know that's bad and I'll remove it when I refactor it.

var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));

select is triggered when a tab is clicked on, but before the tab has been shown

load is triggered after the contents of a remote tab have been loaded (i.e. a tab whose content is not part of the initial page payload, but that is loaded via an ajax call when the user clicks on the related tab)

show is triggered after a tab has been shown

The jQuery documentation makes this relatively clear, but I had to experiment in order to fully understand the difference between select and show.

This has been made more clear since the original question was asked so now the following is true:

Effectively, the functionality for "show" is now provided by "activate" and "select" is done with "beforeActivate" while "load" is still the same.

• activate: (previously show) Triggered after a tab has been activated (after animation completes)
• beforeActivate: (previously select) Triggered immediately before a tab is activated.
• load: Triggered after a remote tab has been loaded.

Also provided are:

• beforeLoad: Triggered when a remote tab is about to be loaded, after the beforeActivate event.
• create: Triggered when the tabs are created.