Question

I am using JqueryUi tab control and I am wanting to have the same tab refreshed when I do some activity on the page. In my case, when I change value of a date control.

I have seen a lot of examples where they suggested to use ‘load’ with something like following:

var selected = $('.tabs').tabs('option', 'selected');
                    $(".tabs").tabs('load', selected);

That does not seem to work. What I am expecting here is if it has some code on that particular tab’s select then it should execute that.

I have a fiddle file to demonstrate it:

http://jsfiddle.net/6F26M/11/. As you can see in the fiddle, I am expecting a alert which will be executed on third tab selection.

Now, Load does not seem to do it.

I have also tried replacing load with select and that works IF I want to select another tab. but in my case, i would like to be able to refresh. it means re-select the same tab and it does not work.

Answer 1

OK. Here is answer:

 var selectedTab = $('.tabs').tabs('option', 'selected');
                    $('.tabs').find('li').eq(selectedTab).removeClass('ui-tabs-selected');
                    $(".tabs").tabs('select', selectedTab);

So, the reason that it is not able to re-select or re-load it self it that the code does not act on selection when 'ui-tabs-selected' is set on any element. You remove it manually and it will work like charm.