Don't know if this the right place since I really dont't know whether the problem lies with Dynagrid or Tabs-X.

I've tried it either by rendering or via ajax call to get the content (=Dynagrid) for a tab. In both cases the result it is the same (see screenshot). The panel surrounding Dynagrid grows with each click on the TabButton from first half the screen to a bit more each time.

    $items = [
                [
                    'label'=>'<i class="glyphicon glyphicon-book"></i> '.Yii::t('app','Posts'),
                    'content'=> $this->render('_postgrid',
                                                        [
                                                            'searchModel' => $searchModel,
                                                            'dataProvider' => $dataProvider, 
                                                        ]),
                    'active'=>true,
                    #'linkOptions'=>['data-url'=>Url::to(['admin/index2'])]
                ],
                [
                    'label'=>'<i class="glyphicon glyphicon-bookmark"></i> '. Yii::t('app','Category'),
                    'content'=>'',
                    'linkOptions'=>['data-url'=>Url::to(['/site/fetch-tab?tab=2'])]
                ],
            ];


    echo TabsX::widget([
        'items'=>$items,
        'position'=>TabsX::POS_LEFT,
        'encodeLabels'=>false
    ]);    

Screenshot here http://pbrd.co/1DRzK12

Thanks for the help and keep up the good work :)

https://www.dropbox.com/s/z6qbh7qa3nc4fcv/Screenshot%202014-11-28%2018.34.03.png?dl=0

Missing Pane parameter

Thanks!

Getting unknown property: kartik\tabs\TabsX::hashVarLoadPosition

TabX uses WidgetTrait which has the method registerPluginOptions($name)
In this method the property hashVarLoadPosition is called which gives an error because TabsX does not inherits from base Widget i think

http://demos.krajee.com/tabs-x gives an internal server error too

Complements enhancements in kartik-v/yii2-krajee-base#52 and kartik-v/yii2-krajee-base#53

I'm trying to render a GridView in TabsX through ajax content. The content is received and displayed but with bugs. The elements in Tab content are not configured right, javascript does not work and styling fails. A simple example below with an GridView and FileInput in the gridview footer.

How it should look like.

This is how I render the tabs and content:

TABS:
TabsX::widget([
            'items' => $vItems,
            'position'=>TabsX::POS_ABOVE,
            'align' => TabsX::ALIGN_LEFT,
            'encodeLabels'=>false,
            'bordered' => true,
        ]);

GRIDVIEW:
GridView::widget([
            'dataProvider' => $provider,
            'panel' => [
                'type' => GridView::TYPE_PRIMARY,
                'heading' => '<h3 class="panel-title"> Hochgeladene Rechnungen</h3>',
                'footer' => $this->drawUploadFrom('matching/uploadbill', new CModelFrUploadFile(), "oFile"),
                'before' => FALSE
            ],  
            'columns' => $vColumns,
            'responsive' => true,
            'hover' => true,
            'export' => false
        ]);

protected function drawUploadFrom($sControllerAction, $oModel, $sModelAttr)
    {
        $oForm = ActiveForm::begin([
                'options'=>['enctype'=>'multipart/form-data'],
                'action' => Url::to([$sControllerAction]),
                'method' => 'post'
            ]);
        $sForm = $oForm->field( $oModel, 'oFile' )->widget( FileInput::classname(), [
            ]);
        ActiveForm::end();

        return $sForm;
    }

I want to open my PREVIEW tab on pageload
The tab should open this with an ajax call

• Tab loading is perfect when I click the tab (reloading every time because cache is off)
• When I do document load the js below should click and load ajax
• The js below clicks the preview tab (and that tab becomes active)
• However the ajax content is not loaded, it is only loaded when I click the tab.

Any ideas ?

$('#PREVIEW').trigger('click');
$('div.wizard_tab .nav-tabs [data-toggle="tab"]').on('tabsX.click', function (event) 
{
    console.log('tabsX.click event');
});

$tabs[] = [
        'label'=>'<div class="wizard_tab_icon"><i class="glyphicon glyphicon-eye-open"></i></div><div class="wizard_tab_text">'.Yii::t('dst', 'Preview').'</div>',
     //   'content'=>$tabPreview,
//        'active'=> ('PREVIEW'== $CurrentStep) ? TRUE: FALSE,
        'linkOptions'=>['id'=>'PREVIEW', 'data-url'=>Url::to(['showtab?tab=PREVIEW'])],
        'headerOptions' => ['class'=>$statusPreview],
        
        ];    
  
echo "<div class='wizard_tab'>";
echo TabsX::widget([
    'items'=>$tabs,
    'position'=>TabsX::POS_ABOVE,
    'encodeLabels'=>false,
    'pluginOptions' => ['enableCache'=>FALSE],
]);
echo "</div>";

In the upcoming Yii release 2.0.5, the tab's items property will support the "visible" property to allow programmatic hiding of tabs (eg. authorization checks, context, etc.)

Will TabsX support it in the same way? It looks to be an early loop break if the visible parameter is present & set to false.

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 yii2-tabs-x.
• This is not an usage question. I confirm having gone through and read the 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. Insert form-builder widget in _form view
2. create tabs items with data-url option (ajax call)

Expected behavior and actual behavior

When I follow those steps, I see... N tabs (first active and worked) the other tabs have unarmed widgets in it ! I also tried with renderAjax instead of renderPartial but without success (layout break) ! I set a ID to $form don't solve !

I was expecting...

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• yii2-tabs-x version: last

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-tabs-x without other plugins.

Steps to reproduce the issue

Setting up the tab definition using named keys without setting an 'active' tab.

Example code:

$tabs = [];

$tabs['source_values'] = [
	'label'   => 'Source Values',
	'content' => 'Some content',
];

echo TabsX::widget( [
	'items'            => $tabs,
] );

Expected behavior and actual behavior

The above fails with the error "The 'label' option is required.". This is caused by how the default active tab is set using numeric key 0.

Environment

Libraries

• Latest yii2-tabs-x version

I have used this ajax tabs its showing on view but on tabs click its not sending ajax requests and i am getting console error like this:
Uncaught ReferenceError: tabsX_00000000 is not defined

I am using the TabsX extension you provide and it works great.

I am using it and trying to create an AJAX tab which renders a set of controls. When the tab loads, the content does however the toggle switches do not render.

I have noticed that the assets are registered but not rendered and the required JS to activate the controls are not fired.

A sneaking suspicion of mine is it has to do with TabsX needing the response sent via JSON. I have tried changing renderPartial to renderAjax to mitigate this however it still does not cause the JS to fire. I have also tried pre-loading the assets in both the parent and the child-rendered page without success.

Have I done it completely wrong or does it not support native yii2 ajax rendering options?

Controller:

public function actionFetch($id, $tab) {
    $model = $this->loadModel($id);
    $html = $this->renderPartial($tab, ['model' => $model];
    return Json::encode($html);
}

View - Index:

<?= TabsX::widget([
    'id' => 'page-tabs',
    'items' => [
        [
            'label' => 'Tab1',
            'content' => $content1,
            'active' => true,
        ],
        [
            'label' => AjaxTab
            'linkOptions' => [
                'data-url' => Url::to(['site/fetch?id='.$id.'&tab=ajaxtab1']),
            ],
        ],
    ]
]); ?>

View - Tab:

<?= SwitchInput::widget([
    'name' => 'space_status[enabled]',
    'pluginOptions' => [
        'size' => 'large',
        'onColor' => 'success',
        'offColor' => 'danger'
    ]
]); ?>

When I use the left position ActiveForm every time I open the same tab it adds the min-heigth and the tab is increased, if I use any other tab position this problem does not happen.

They can help me?

I used the linkOptions to send an ajax request, but I don't know how and where to use the data returned. 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']);

But the content displays empty, not the json string

Hey, got the ajax-tabs to work even though not as expected. First off, you never claimed to support ajax-forms in your tabs ? Because If I submit one, the action redirects to the route instead of reloading tab-content. (I fixed this with some self-written javascript).
Secondly, I just can't figure out where the "enableCache" option goes. I tried the main options, item options, etc.. without success. Could you give a short example ?
Thanks in forehand

I designed multiple forms(different for every tab) using single model in yii2-tabx-x.
now i am facing a problem of validation for every tab's form, bcoz all fields attributes of model are required. so validation fails for every form. whenever i submit.
i want to submit my forms individually
plz help.

Hi there,

been having a bit of a problem with Tabs-x and Dynagrid returned as Json.
With json_encode:

• filters dont show
• grid/toolbar layout changes
• toolbar dialogs dont work anymore

See screenshots:
http://pasteboard.co/FZ9dvi.png
http://pasteboard.co/G0qh3Z.png

Thanks & Happy new year

Please add branch-alias to your composer.json
Example: https://github.com/yiisoft/yii2/blob/master/composer.json#L91-L93
This option allows to update your application to latest valid version.

P.S. This is the same problem as all the rest of your projects.

I've been following your documentation in ajax tabs implementation to no avail. Somehow the active tab isn't automatically loaded on start. Here is my code:

<?= TabsX::widget([
    'items' => [
        [
            'label' => 'Home',
            'linkOptions' => ['data-url' => Url::to(['tab-home'])],
            'active' => true,
            'options' => ['id' => 'home'],
        ],
        [
            'label' => 'Progress',
            'linkOptions' => ['data-url' => Url::to(['tab-progress'])],
            'options' => ['id' => 'progress'],
        ],
        [
            'label' => 'Contact',
            'linkOptions' => ['data-url' => Url::to(['tab-contact'])],
            'options' => ['id' => 'contact'],
        ],
    ],
    'position' => TabsX::POS_ABOVE,
    'encodeLabels' => false
]) ?>

Is there something wrong with my code?

When i use this component i get this JS error.

This is my view file

[

<h1><?= Html::encode($this->title) ?></h1>

<?= TabsX::widget([
    'position' => TabsX::POS_ABOVE,
    'align' => TabsX::ALIGN_LEFT,
    'enableStickyTabs' => true,
    'bordered' => true,
    'items' => [
        [
            'label' => '<i class="fa fa-pencil-square-o"></i>' . Yii::t('interprop', 'Main data'),
            'encode' => false,
            'content' => $this->renderAjax('_form', [
                'model' => $model,
            ]),
            'active' => true
        ],
        [
            'label' => '<i class="fa fa-credit-card"></i>' . Yii::t('interprop', 'Identities'),
            'encode' => false,
            'content' => $this->renderAjax('identities', [
                'model' => $model,
            ]),
        ],
        [
            'label' => '<i class="fa fa-map-signs"></i>' . Yii::t('interprop', 'Addresses'),
            'encode' => false,
            'content' => $this->renderAjax('addresses', [
                'model' => $model,
            ]),

        ],
    ],
]);
?>

<?php Modal::begin([
    'id' => 'modalForm',
    'header' => '<h2>Hello world</h2>',
     ]);
echo "<div id='modalFormContent'></div>";
Modal::end();
?>

I am using Yii 2.0.7 and TabX version 1.3.2

After upgrading yii2-krajee-base to 1.8.2 the following error is occurring both in my code and on the demo page as well.

Getting unknown property: kartik\tabs\TabsX::pluginDestroyJs

Reverting to 1.8.1 resolves the issue for now.

I'm using Tab-x. my codes are these

$items = [

[
    'label'=>'<i class="fa fa-plus-circle"></i> '.Yii::t('app', 'Create Category'),
    'linkOptions'=>['data-url'=>Url::to(['/site/createcategory'])],
    'active'=>TRUE
],

];
// Ajax Tabs Above
echo TabsX::widget([
'items'=>$items,
'position'=>TabsX::POS_ABOVE,
'encodeLabels'=>false
]);
I want to show my active item that handles via url when my page is loading.How can I do that?

The tab container's 'height' property is only used when the position is set for POS_TOP or POS_BOTTOM.

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 yii2-tabs-x.
• This is not an usage question. I confirm having gone through and read the 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. Create the basic example of the tabs-x extension
2. run the tabs and notice the 404 error in the console
3. rename the controller action without using "Tab" in the action name and it works

Expected behavior and actual behavior

When I follow those steps, I see...

I was expecting...

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• yii2-tabs-x version:

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-tabs-x without other plugins.

I suggest adding jmschabdach/bootstrap-tabdrop or a similar functionality to provide better tabs usability on small screens.

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 yii2-tabs-x.
• This is not an usage question. I confirm having gone through and read the 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. Load page with TabX

Expected behavior and actual behavior

I just load my page and I'm find the error:

PHP Fatal Error – yii\base\ErrorException

Class 'kartik\tabs\View' not found

I only made a composer update...

I was expecting...

Environment

Browsers

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

Operating System

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

Libraries

• jQuery version:
• yii2-tabs-x version:

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-tabs-x without other plugins.

Automatically set content to empty string if not provided

The changelog suggests there is a 1.2.3 but there is no tag (and thus it's not installable via composer).

Sticky tabs should only listen .nav clicks and not inside content href clicks.

if ($this->enableStickyTabs) {
            StickyTabsAsset::register($view);
            $opts = Json::encode($this->stickyTabsOptions);     
       $id = 'jQuery("#' . $this->containerOptions['id'] . '>.nav")';
            $view->registerJs("{$id}.stickyTabs({$opts});");
        }

Use class with correct namespace for InvalidConfigException

Currently, you need to browse off to a different tab and select back to reload its' dynamic contents.

It would be very useful to add the ability (optional) to allow clicking on an active ajax header tab and have it reload the contents of the pane.

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.

Which credential it require when i'm going to install it?

I have applied my login credential of github, still it do not allow to download this and throw error message: Wrong credential.

Missing argument 3 for yii\bootstrap\Tabs::renderDropdown(), called in /var/www/html/vet/vendor/kartik-v/yii2-tabs-x/TabsX.php on line 195 and defined

Drop Down defined as:
[
'label'=>' ' . Yii::t('vet', 'More'),
'items'=>[
[
'label'=>' ' . Yii::t('vet', 'Finding') ,
//'encode'=>false,
'content'=>'test4',
],
[
'label'=>' ' . Yii::t('vet', 'Weight'),
//'encode'=>false,
'content'=>'test5',
],
[
'label'=>' ' . Yii::t('vet', 'Files'),
//'encode'=>false,
'content'=>'test6',
],
],
],

I set the height size_tiny, but the height has no change. The element's html class has been changed to "tabs-x tabs-above tab-align-right tab-height-xs"

    echo TabsX::widget([
        'items' => $items,
        'height'=>TabsX::SIZE_TINY,
        'position' => TabsX::POS_ABOVE,
        'align' => TabsX::ALIGN_RIGHT,
        'bordered' => false,
        'encodeLabels' => false
    ]);

When you install/update trough composer yii2-tabs-x he will download the Version 1.3.2 of bootstrap-tabs-x because this one had not 1.3.3 like latest release and yii2-bas-x not use, of course, the dev one.

Here's my problem: I have two tabs on my page and there are two models connected with it. One model for each tab.
This is how it looks in the view:

When I go to the update action in the controller I can see that the $_POST is set for the client model, but not for the workflow model.
The controller update looks like this:

public function actionUpdate($id)
{
$model = $this->findModel($id);
$workflowModel = Workflow::findOne($id);
if ($model->load(Yii::$app->request->post()) && $model->save()) {
//check to see if workflowModel via $_POST, but shows nothing
return $this->redirect(['view', 'id' => $model->ClientID]);
} else {
return $this->render('update', [
'model' => $model,
'workflowModel' => $workflowModel,
]);
}
}

I've set all the attributes in the workflowModel to 'safe' but that doesn't change a thing. :(
It seems I am missing something, but can't figure out what. Where can I see or check why the model's data isn't sent along my POST request?
I hope someone can help me out with this.
Thanks!

Is it possible to change active tab on submiting form above tabx, based on post data?

Hey Kartik,

For one of my projects I need printable tabs; while considering if I want to implement this as a separate widget subclassing either your or Yii's official tab widget, I thought I'd just ask if you are interested in this as well.

The functionality I envision is as follows:

1. Each tab header is duplicated in the tab-content as well, but with a printing only class .visible-print-block.
2. Each tab navigation element gets a class .hidden-print
3. Each tab content div gets a .visible-print-block class.

This way when printing tabs, the navigation will be hidden and each tab will be printed with the appropriate header line.

This could all be toggled with a boolean configuration option for the tabs widget.

If you'd like this in your tab widget I can make a PR!

Hey,

Only with ajax usage when i say that one tab is active your widget shouldn't click on active tab by default?

选项renderTabContent无效

\kartik\tabs\TabsX::widget([
            'renderTabContent' => false,
            'items' => [
                [
                    'label' => '选项',
                    'active' => true,
                    'options' => ['id' => 'options'],
                ]
            ]
        ])

但是这个是可以的：

\yii\bootstrap\Tabs::widget([
            'renderTabContent' => false,
            'items' => [
                [
                    'label' => '选项',
                    'active' => true,
                    'options' => ['id' => 'options'],
                ]
            ]
        ])

It's seems like pluginEvents doesn't work.

I noticed an issue when using kartik gridview with ajax enabled content.

Example:

 <?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
        'responsive'=>true,
    'hover'=>true,  
    'pjax'=>true,
    'pjaxSettings'=>[
        'neverTimeout'=>true
    ],   

A link referring to company info on the one of attributes

 return HTML::a(StringHelper::truncate($companyName, 40, $suffix = '...'),['customers/view','id' =>      $data->company_id],['title'=>$companyName]);

The company Page contain few tabs and once clicked on the company name link it should open a company page with all the tabs instead there seems be an ajax request and the page does not change instead of that a content of one TAB is displayed in the current view.

So basically a redirection to page does not happened instead of that ajax request happens and one of the tab content is displayed.

I had to disable ajax on the gridview.

Please let me know if any more info is needed.

The link on ajax enabled gridview works fine if they are referring to a different pages where tabs are not present.

I have trouble with download photos over AJAX TabsX . The information comes in, but the tab is not shown.
in index.php

 [
        'label'=>Yii::t('app','Фото'),
        'encode'=>false,
        'linkOptions'=>['data-url'=>\yii\helpers\Url::to(['organizations-photo/show','org_id'=>$model->id])]
    ],

Link is responded and send data.But, not show in tabs.
In the OrganizationsPhotoController

public function actionShow($org_id){
        $models=OrganizationsPhoto::find()->where(['org_id'=>$org_id])->all();
        $str='<div class="row">';
        foreach($models as $model){
            $str.='<div class="col-md-2">';
            $str.=$model->getPreviewIcon();
            $str.='</div>';
        }
        $str.="</div>";
        return $str;
    }

Hello,

I’ve a problem with tabx and gridview, follow scenario:

Tabx:

In view file view/user/details.php and controller UserController.php

1. Item “home” is rendered by “content” with render function (_home.php), all variables will be supported from UserController.php/actionDetails which render the details.php.
2. Item “Customer” use the “linkOptions” with 'linkOptions'=>['data-url'=>\yii\helpers\Url::to(['=/app/user/customerlist, 'id'=>$model->ID])] where $model comes from the UserController.php/actionDetails.
3. Item “Products” use also the linkOptions with 'linkOptions'=>['data-url'=>\yii\helpers\Url::to(['=/app/user/productlist, 'id'=>$model->ID])] where $model comes from the UserController.php/actionDetails.

Item “Customer” and “Products” has both the GridView in use. The first page of the GridView of the “Customer” and “Product” items is ok but if I click on the second page button or enter some filter/search text it fails. The view view/user/details.php will exit, the browser load (on click of the GridView “Customer”) the text values from the UserController.php/actionCustomerlist which is a Json:encoded output (echo Json::encode($html);)

Some Code Fragments:

The ActionCustomerlist

public function actionCustomerlist ($id)

    {

       $searchModel = new UsercustomerSearch();

       $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

       $dataProvider->query->andWhere(['user_ID' => $id]);

       $html = $this->renderPartial('_usercustomer', [

                    'searchModel' => $searchModel,

                    'dataProvider' => $dataProvider,

                    'user_ID' => $id,

       ]);

       return Json::encode($html);

    }

The _usercustomer.php

Pjax::begin(['id' => 'usercustomer-site']);

GridView::widget([ …
]);

Pjax::end();

The _userproduct.php

Pjax::begin(['id' => 'userproduct-site']);

GridView::widget([ …
]);

Pjax::end();

The grid view has also an ID.

Where is my
mistake? Thanks for help.

Hello. I'm get the error: "Uncaught TypeError: ((jQuery.event.special[handleObj.origType] || (intermediate value)).handle || handleObj.handler).apply is not a function
at HTMLDocument.dispatch (jquery.js?v=1496738910:4737)
at HTMLDocument.elemData.handle (jquery.js?v=1496738910:4549)"

My code widget:
echo TabsX::widget([ 'items' => AdvertTypePlacement::get_items_for_tabsx(), 'encodeLabels' => false, 'pluginEvents' => [ "tabsX.click" => "function() { console.log('test'); }", ], ]);

Thanks for help.