jQuery ui tabs select help needed. Can I cancel the action?

I'm using the following function to update the tabs on a jQuery ui tabs widget.

 function updateTheTabs(select, disable) {
    var selectIdx = vehicleSelectorControl.tabIndexByName(select);
    $tabs.tabs('option', 'disabled', [])
        .tabs('option', 'disabled', convertToTabIndices(disable))
        .tabs('option', 'collapsible', true)
        .tabs('select', selectIdx)
        .tabs('option', 'collapsible', false)
        .tabs('select', selectIdx);      
}

I'm toggling the 'collapsible' option to achieve a desired behavior by the client. I also update the content of the tab o开发者_如何转开发n tabSelect. My question is I would only like the first tabSelect to actually trigger the call to the server. The 2nd tabSelect is just meant to show the tab. I realize this is a bit of a hack. Other controls on the page affect the tab states and in a certain case, a tab was already selected so the first call wasn't updating its content, hence I made it collapsible, select it (which is actually de-selecting it), set collapsible to false, then selecting the tab (this triggers the update properly). Anyways the client likes the current behavior except that I can see the server is being called twice. I tried breaking the chain in to two pieces and setting a boolean variable in between then checking it when deciding to update the tabs. I didn't quite get the behavior I wanted. Can anyone point me in the right direction here? Again, I don't want to call the server if it's not necessary. I would like a solution that doesn't require changing the 'updateTheTabs' function. Thanks so much for any advice or tips.

Cheers,

~ck in San Diego

I'm not sure I got what you wanted to do, but to the sentence "...except that I can see the server is being called twice", I take that you want to cache the content of the tab.

You may try to set the cache option to true when you initiate the tabs:

$tabs.tabs({cache: true});

It might be easiest to just use a global to keep track of whether or not the tab has been loaded. Then in beforeLoad, check if the tabs has been loaded. If not, load it, otherwise just show it. In example code below, be sure to change 'my-tab' to match the title in the html, i.e. <a href="whateverurl" title="my-tab">My Tab</a>

var tabLoaded = false;

$("#tabs").tabs({

beforeLoad: function(event, ui) {
  if($(ui.panel).attr('id') == 'my-tab' && tabLoaded) {
    event.preventDefault();
  }

});