Semantic-ui: [Tab] Just load an url

[emil-nasso]

I have tried to figure out how to use the tab component for loading ajax content, but i really cant figure it out.

I need a few tabs and i want them all (or just a few of them) to load content through ajax.

Just setting auto:true and setting data-tab = "/test/something?query=123" gives me an error:

Activated tab cannot be found for this context. [a.item, context: a.item] [body.hello, prevObject: b.fn.b.init[1], context: document, selector: "body"] $.fn.tab.$allModules.each.module.error @ 482339a_semantic_5.js:13420(anonymous function) @ 482339a_semantic_5.js:13160b.extend.each @ 482339a_jquery.min_1.js:3$.fn.tab.$allModules.each.module.changeTab @ 482339a_semantic_5.js:13083$.fn.tab.$allModules.each.module.event.click @ 482339a_semantic_5.js:12996b.event.dispatch @ 482339a_jquery.min_1.js:3b.event.add.v.handle @ 482339a_jquery.min_1.js:3

The documentation about use an "api" for it is a bit lacking. I have no idea where to even start.
http://semantic-ui.com/modules/tab.html/usage#with-an-api-behavior
(That link seems to be broken, history urls doesnt work in the documentation. Go here: http://semantic-ui.com/modules/tab.html , click usage and scroll to ...with an API Behavior).

All i really want is to be able to put an url on the divs, like this;

<div class="ui top attached tabular service menu">
        <a class="item active" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="first" data-action="first">
        Some preloaded content
    </div>
    <div class="ui bottom attached tab segment" data-tab="second" data-url="/some/url?with=queryparams">
    </div>

And have the first tab preloaded with content and the second tab loaded when i click it.

Is that possible with semantic ui?

[emil-nasso]

I ended up (or will probably end up) doing it manually.

  $('.ui.tabular.ajax.menu .item').tab({
    history: true,
    onTabInit : function(tabPath,parameterArray, historyEvent){
      url = $(this).data('url');
      if(url){
        _this = $(this);
        $(this).addClass('loading');
        $.get(url, function(response){
          _this.html(response);
          _this.removeClass('loading');
        });
      }
    }
  });

With that in place i can have a menu that looks like this.

    <div class="ui top attached tabular service menu">
        <a class="item active" data-tab="first">First</a>
        <a class="item" data-tab="second">Second</a>
        <a class="item" data-tab="third">Third</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="first" data-action="first">
Preloaded-content
    </div>
    <div class="ui bottom attached tab segment" data-tab="second" data-url="/echo/THE_SECOND_TAB">
    </div>
    <div class="ui bottom attached tab segment" data-tab="third" data-url="/echo/THE_THIRD_TAB">
    </div>

Please correct me if this was already supported by semantic.

[jlukic]

It's really simple actually tab just takes an apiSettings object as a parameter. For more explanation of how API settings work and route data see the docs.
http://semantic-ui.com/behaviors/api.html#/overview

$('.ui.tabular.ajax.menu .item').tab({
  apiSettings = {
    url: 'some/url/or/another?tab={tab}'
  }
});

[scoman81]

This is pretty confusing still, or maybe I'm just dense.

The code you wrote has "apiSettings = {}" ... that's not supposed to be "apiSettings: {}" ?

Also, the code you wrote uses {tab} but the docs say {$tab}.

The docs never show the option of an object field called apiSettings, as far as I can see. What the docs say is to assign a mapping object to the global $.fn.api.settings.api, and then name the action on the tab using $(xx).api({}). Maybe I've missed a big chunk.

Could you please show an example that uses the same syntax as the docs, using $.fn.api.settings.api, and then the .api() function on the tab control? I've tried every combination, and while I can get tabs to make an ajax call using the "auto: true" format, I can't get tabs to make an ajax call using the API.

Any help would be greatly appreciated!

[scoman81]

Sorry, the "apiSettings" field is indeed shown on the examples page! My bad. But there's no example using "url" there.

Also sorry about the barrage of messages ... kinda desperate to decide if I'm gonna be able to use SUI for this project or not.

So after further testing, this code gets me closer:

$('.menu .item').tab().api({
  url: 'pages/{tab}.php'
});

This indeed makes an ajax call to "pages/tabname.php" where tabname is the data-tab value from the A tag with the class of "item." However, the API function is expecting JSON, isn't it? Returning HTML doesn't show anything in the target div.

My next test:

<div class="ui top attached tabular menu">
  <a class="active item" data-tab="options">Options</a>
  <a class="item" data-tab="price-groups">Price Groups</a>
</div>

and:

$('.menu .item').tab({
  auto: true,
  path: 'pages/'
});

As is, this generates an AJAX call to this url:

http://localhost/e2v-4/pages/price-groups?_=1442387765695

This would be OK if I was implementing a REST api, but I'm not. What I really want is to either load pages/options.php and pages/price-groups.php, OR something like pages/loader.php?p=options

However, I can't append a file extension onto the path, so the first method is out. Using a path like this:

$('.menu .item').tab({
  auto: true,
  path: 'pages/loader.php?p='
});

results in this URL:

http://localhost/e2v-4/pages/loader.php?p=/price-groups&_=1442388152361

The forward slash being a bit problematic.

So then I thought:

$('.menu .item').tab({
  auto: true,
  path: 'pages/loader.php?p={tab}'
});

but this results in:

http://localhost/e2v-4/pages/loader.php?p=price-groups/price-groups&_=1442388242634

So even though I'm using {tab} I still get the tab name automatically appended.

Hoping I'm just missing some goodies that will make this work....

Thanks!

[jlukic]

The code you're looking for is

$('.menu .item').tab({
  apiSettings: {
    url: 'pages/{tab}.php'
  }
});

If you are using HTML5 state, the path is the base URL of all paths. Check the settings page for more info.

[scoman81]

Thanks! This totally worked!