Reloading Content of Ajax Tab

Question

I'm completely puzzled, I make an ajax call inside a Jquery UI Tab, after that I want to refresh the content of the tab, the function that should be doing it is:

function reloadTab(){
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('load', selected);
return false; 
}

Incredible but true it doesn't work at all, since this:

$tabs.tabs('select', selected);

Wouldn't work either I thought it was an issue with not being able to reload a tab, and this is what I found out:

'select' works only to select a different tab than the current one while load doesn't work at all.

I also tried the solution posted here: http://stackoverflow.com/questions/900821/stuck-reloading-ajax-content-in-a-jquery-tab-programatically

With no luck.. please help me because I'm starting to get angry :-(

Answer 1

Hi,

could you please clarify: Does selected contain the expected value, i.e. does

$tabs.tabs('option', 'selected')

produce the correct index? If it does, then tabs('load') appears to be buggy (as suggested in the post you mentioned). Maybe you could try switching to another tab, do the load, then switch back again. Not very elegant, I know. Sorry I can't be of more help.

Cheers, Tom

Answer 2

Hi, This works for me:

function reloadTab(tabnum) {
 $('#tabs').tabs('select',tabnum);
 $('#tabs').tabs('load',tabnum);
}

The trick is that load does not work if there hasn't been a tab selected first.