selecting & loading a jquery tab programatically

Question

Hi, I'm having trouble trying to get this functionality to work. I would like to load a tab automatically when the page loads. I have used the following code.

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

However, what's happening is that it's only selecting it and not loading it (that tab loads via ajax). Interestingly when I select another tab and then go back to the 1st tab again then it loads fine.

Answer 1

Have you tried specifying the selected tab at the time of initialization:

var $tabs = $('.selector').tabs({ selected: 0 });

After initialization, you can do this to programmatically select a tab:

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

EDIT: This works perfectly for me:

var $tabs = jQuery("#tabDiv > ul").tabs( { selected: null } );
$tabs.tabs("select", 0);

Answer 2

Don't forget to put it inside of a $(document).ready(function(){;}); construct.

I'm sure that's not the cause of your problem, but it can't hurt to make sure your jQuery isn't firing until everything is set up to handle it.

Answer 3

You should be able to call:

$tabs.tabs('load', 0);

after you select it to load its data.

Answer 4

I had the same problem before. The solution I had was calling tabs() two times; once without parameters; once with the select option:

Eg.

$("#tabs").tabs();
$("#tabs").tabs('select', 2);

Answer 5

I use all above methods but I cant select the tab Please help me

Answer 6

i have problems preserving tabs created. when user clic on a link all tabs less tabs created dynamically are loaded. i dont know if the answer will be add again the tab. if someone have recomendations, are welcome.. for tab selection im also use $("#tabs").tabs('select', 2);