To prevent event namespace conflicts.

New property addCss that defaults to tabs-krajee. This is a CSS class applicable for only left and right positioned tabs. This class will be appended to your tabs container (if not already) and will style the tab and pane widths and margins. The tabs-krajee css class is part of the inbuilt CSS file and styles the left and right positioned tabs as seen in the tabs x demos.

I am passing into the TabsX (v1.2.1) w/ bootstrap-tabs-x (v1.3.1):

'pluginOptions' => [
    'enableCache' => false, // tried this with true with no difference
    'successCallback' => [
        '#tabN' => 'function (data, status, jqXHR) { alert("test message"); },'
    ],
],

Spent quite a but of time troubleshooting as I'm not very proficient with JS and found that the following is never true:

if (cbSuccess && typeof cbSuccess === "function") {

I found the success event was fired but would fail at the check and never execute the callback. typeof(cbSuccess) resulted in string and not the function that it is expecting and as such would never fire. If I hardcode that same function as cbSuccess right before the function it is fired as expected.

Am I doing something wrong when passing the value through?

Prerequisites

• [ X ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [ X ] The issue still exists against the latest master branch of bootstrap-tabs-x.
• [ X ] This is not an usage question. I confirm having read the plugin documentation and demos.
• [ X ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ X ] I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Set the active tab to ajax
2. Refresh the page

Expected behavior and actual behavior

Tab doesn't make ajax call

The active tab should automatically load on page ready.

Environment

Browsers

• [ X ] Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• [ X ] Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-tabs-x version:

Isolating the problem

• [ X ] This bug happens on the plugin demos page
• [ X ] The bug happens consistently across all tested browsers
• [ X ] This bug happens when using bootstrap-tabs-x without other plugins
• [ X ] I can reproduce this bug in a jsbin

Hi.. thanks for this plugin.

As for now, ajax type is set to post. It would nice if it's configurable

Please add NPM package for bootstrap-tabs-x

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-tabs-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

The tabContentOptions setting is ignored by this plugin. I'm providing a pull request to fix this.

In the zip file of release 1.3.2 two CSS files

• css/bootstrap-tabs-x-bs4.css
• css/bootstrap-tabs-x-bs4.min.css
  are missing

May you forgot to create a new Release 1.3.3, you allready commited "Updates to release v1.3.3" (including these files), but there's no new Release 1.3.3

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-tabs-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. use Composer require kartik-v/bootstrap-tabs-x
2. look in vendor/kartik-v/bootstrap-tabs-x/css
3. look for bootstrap-tabs-x-bs4.css - no files there, but in repo you can find these files

Libraries

• jQuery version:
• bootstrap-tabs-x version: 1.3.2

If a disabled class is added to the tab 'li' element - the tab will not be navigable.

Better auto height sizing for left and right positioned tabs.

I used ajax tabs, in each tab, there is a grid. Everytime I click the tab, it send a request to get the grid data and render. But I want to send a request just at the first time, and I want to keep in the ajax mode. How to do this?
My code like this:

...
widget = \kartik\grid\GridView::widget([
    'dataProvider' => $provider,
    'hover' => true,
    'columns' => [
        [
            // 'attribute' => 'field',
            'value' => function ($model, $key, $index, $widget)
            {
                // Write your formula below
                $url = \yii\helpers\Url::to('datamine/graph/' . $model['id']);
                return \yii\helpers\Html::a($model['field'], $url);
            },
            'format' => 'raw'
        ]
    ],
    'showHeader' => false,
    'showPageSummary' => false,
    'showFooter' => false,
    'layout' => '{items}',
    'containerOptions' => [
        'style' => 'overflow: auto'
    ], // only set when $responsive = false
    'pjax' => true // pjax is set to always true for this demo
]);

foreach ($types as $type) {
    $item['label'] = $type;
    $item['encode'] = false;
    $item['linkOptions'] = [
        'data-url' => \yii\helpers\Url::to([
            '/datamine/field',
            'label' => $type
        ])
    ];
    if (strcasecmp($default, $type) == 0) {
        $item['active'] = true;
        $item['content'] = $widget;
    } else
        $item['active'] = false;
    $items[] = $item;
}
...
    echo TabsX::widget([
        'items'=>$this->params['items'],
        'position'=>TabsX::POS_LEFT,
        'bordered'=>true,
        'sideways'=>false,
        'encodeLabels'=>false
    ]);

Code cleanup and restructure for JS lint changes (using JSHint Code cleanup library)

New properties successCallback and errorCallback added to plugin options.

Release and tag version 1.3.3 missing.
File are updated in the repositories but there is no way to get the most updated version through composer.

Add ability to tabs to load content via ajax.

I used the ajax tabs, but I don't know how to use the data to render context, for example:

view:
...
    $item['label'] = $type;
    $item['content'] = '';
    $item['linkOptions'] = ['data-url'=>\yii\helpers\Url::to(['/datamine/graph'])];
...
    echo TabsX::widget([
        'items'=>$this->params['items'],
        'position'=>TabsX::POS_LEFT,
        'bordered'=>true,
        'sideways'=>false,
        'encodeLabels'=>false
    ]);

controller:
return json_encode(['content2'=>'test']);

The context of the item display empty

bootstrap-tabs-x.patch.txt

Simple patch to correct the scope.

Not sure if this is a possibility, but I am attempting to fire a JS call after content within a tab has become visible. The "click" event fires however the function is called immediately when the user clicks the tab, then the content loads negating any post-"shown" functionality.

Any suggestions?