How do you call the tabselect event when selecting a jquery ui tab programmatically

I'm using jQuery UI tabs, and I have a tabselect event where I use an api to load json and generate the content of the tab:

$('#tabs').bind('tabsselect', function(event, ui) {
  if (ui.panel.id == "tab1") {
    $.getJSON(...)
    //load content of tab here
  }
}

I'm also using a history plugin for tab linking:

$.address开发者_如何学Go.change(function(event){
  $("#tabs").tabs( "select" , hash );
}

So if the user goes to mypage#tab1 then tab1 is loaded automatically. The problem is that the tabselect event is not fired, so the content doesn't load.

I've made sure that all of this happens after the document has loaded. If I go to a tab manually then it works fine, just not when using tabs("select", ...);

Is there some option I have to enable so that the normal events are fired for programmatically selecting a tab rather than clicking on it?

According to the documentation for select:

Select a tab, as if it were clicked.

This in fact does call the tabselect event handler, as you can see by this example:

http://jsfiddle.net/andrewwhitaker/UsnNu/1/

Interestingly, it doesn't fire if a tab is selected programmatically that's already active (in the example, if you select tab-1 programmatically it doesn't fire the event handler). Could this be the problem? Or could hash contain the wrong contents (i.e. a problem with the history plugin you're using)?

Sorry I couldn't produce a definitive answer, but hopefully that'll help you track down the problem.

Try hooking into the show event instead. That worked for me as I had the same issue when I started to cache tabbed states.

$( ".selector" ).bind( "tabsshow", function(event, ui) {
  ...
});

more information here: http://jqueryui.com/demos/tabs/#event-show