Semantic UI Tabs - load active segment remotely on initial page load - semantic-ui

Question

how can I get my active tab & segment to display on the initial page load - my tabs load remotely using ajax and all work when you click on them, but on first page load the tab segment is empty :
<div class="ui tabular menu grid">
<div class="ui container">
<a class="item active tabby" data-tab="home"><i class="large home icon">
</i>Home</a>
<a class="item tabby" data-tab="two"><i class="large chart bar icon"></i>Two</a>
<a class="item tabby" data-tab="three"><i class="large calendar icon"</i>Three</a>
<a class="item tabby" data-tab="four"><i class="large clock icon"></i>Four</a>
</div>
</div>
<div class="ui center aligned grid">
<div class="ui container">
<div class="ui tab active segment " data-tab="home"></div>
<div class="ui tab segment" data-tab="two"></div>
<div class="ui tab segment" data-tab="three"></div>
<div class="ui tab segment" data-tab="four"></div>
</div>
</div>
To initialise:
$('.tabular.menu .item')
.tab({
cache: false,
evaluateScripts : true,
auto : true,
path : '/dashboard',
ignoreFirstLoad: false,
alwaysRefresh: true
});

Answer 1

I encountered the same issue, when the page loads the first or 'active' tab will open and display the contents defined by the html source, but it does not auto-load. However, clicking on the tab causes the auto-load to occur.
I have just read an article which suggests that jQuery does not fire the activate event on the first tab when it is created. If this is true then it might explain why this happens. jQuery bug report
My solution is to programatically activate the tab. The semantic ui documentation mentions doing this, but the information is a bit vague: find it in 'Tabs - Usage': where it refers to 'Initialising Tabs ... without Menus'. Semantic UI - Tabs - usage
Tabs can be activated with jQuery:
$.tab('change tab','tab-name');
where 'tab-name' is the 'path' you specified in 'data-tab="tab-name"'. At first I found that this just opened and closed the tab without auto-load, until I used a jQuery selector which selected the MENU item, not the TAB item, then the auto-load worked.
So, I activate the tab just after initializing the tabs in the Document.Ready function:-
$('#infotabs .menu .item')
.tab({
auto: true,
path: '/pathto/'
})
$('#infotabs .menu .item').tab('change tab','tab1.php')
;
This is the corresponding HTML:
<div id="infotabs">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="tab1.php">tab1</a>
<a class="item" data-tab="tab2.php">tab2</a>
<a class="item" data-tab="tab3.php">tab3</a>
</div>
<div class="ui active bottom attached tab segment" data-tab="tab1.php">
1
</div>
<div class="ui bottom attached tab segment" data-tab="tab2.php">
2
</div>
<div class="ui bottom attached tab segment" data-tab="tab3.php">
3
</div>
</div>