Tab: The state library has not been initialized

[lajunta]

When I add

$('.filter.menu .item').tab();

I got this error:

Tab: The state library has not been initialized .

How can I solve this ?

[nd0ut]

You need jquery-address library: https://raw.github.com/asual/jquery-address/master/src/jquery.address.js

Tabs feature is currently under development.

[lajunta]

Thanks, I will add this in my assets pipeline.

[lajunta]

It works .

[jlukic]

I'm currently working on the docs for tab, state and api, the last two are getting major rewrites in a branch.

[jagooding]

@jlukic What is the current status on this? I added the jquery address library, and it got rid of the state library error, but tabs are still not functioning for me. using the 12.4 release

[deneuxa]

Having the same problem here, I added the jquery.address dependency, @jagooding did you succeed to make it work ?

[deneuxa]

OK I succeed :) I was initializing the tab container itself. It has to be done on the menu's items:
$('#menu .item').tab();

[DavidLGoldberg]

I have it working too. As a stop gap measure (before the docs are complete), can you just have it say this is a dependency? This would have saved a lot of time, reading source etc. Even then it was a little tricky, I should have realized $.address needs a plugin :)

The error: 'The state library has not been initialized', could be a little more clear. In fact, it might as well spell out including it in the asset pipeline "address extension" etc. I thought "state library" was some kind of internal state that was breaking.

[carolineschnapp]

I am trying to get tabs working and running into the same error.

What do I need to include, and in what order inside all my JS includes?

[deneuxa]

This is what i do :

//= require jquery.address

//= require ../semantic/definitions/modules/dimmer.js
//= require ../semantic/definitions/behaviors/state.js
//= require ../semantic/definitions/behaviors/form.js
//= require ../semantic/definitions/modules/transition.js
//= require ../semantic/definitions/modules/popup.js
//= require ../semantic/definitions/modules/shape.js
//= require ../semantic/definitions/modules/rating.js
//= require ../semantic/definitions/modules/modal.js
//= require ../semantic/definitions/modules/accordion.js
//= require ../semantic/definitions/modules/dropdown.js
//= require ../semantic/definitions/modules/tab.js

take care you need to initialize tab on the items, not on the tabs themselves :

$('#big_tabs .item').tab();

#big_tabs
     #tab1.item{data:{tab:'tab1_content'}}
     #tab2.item{data:{tab:'tab2_content'}}
     #tab_content
         .ui.tab{data:{tab:'tab1_content'}}
        .ui.tab{data:{tab:'tab2_content'}}

(HAML syntax)