Yii Bootster - TbTabs Change Tab Event

Question

How can I control a change of tab event when using TbTabs in Yii Bootter?

Here is my code (but it didn't alert when I have changed tab):

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
            array('label' => 'Trainer Modules', 'content' => 'content tab 1',
            array('label' => 'Default Modules', 'content' => 'content tab 2',
        ),
        'events' => array(
            'change' => "js:function(){alert('123');}"
        )
    ));

In TbTabs; `run` method, you have code which will register your events handlers for the component. So if it does not work for you, can you check whether it gives Javascript error in console or not? — Mohamad Eghlima, Jan 19 '16 at 12:38

k__gc_im_o_ · Accepted Answer · 2013-08-26T10:03:08.050

Just for the future reference, one solution to control Tab clicks on TbTabs is to assign Id to each tab and handle the event using ClientScript, Here is how it works:

Assign id to each link like this:

$this->widget('bootstrap.widgets.TbTabs', array(
    'type'=>'tabs',
    'placement'=>'above', // 'above', 'right', 'below' or 'left'
    'tabs'=>array(
        array('label'=>'Section 1', 'active'=>true, 'linkOptions' => array('id'=>'link1')),
        array('label'=>'Section 2', 'linkOptions' => array('id'=>'link2')),
    ),
));

Then register your js using CClientScript

Yii::app()->clientScript->registerScript("link1Click", "$('#link1').click(function(){alert('link1 is clicked');})");
Yii::app()->clientScript->registerScript("link1Click", "$('#link2').click(function(){alert('link2 is clicked');})");

score 1 · Answer 2 · answered Jul 24 '13 at 03:57

1

Tabs are ul and li element. They don't have change event.

see the code:

foreach ($this->events as $name => $handler)
    {
        $handler = CJavaScript::encode($handler);
        $cs->registerScript(__CLASS__.'#'.$id.'_'.$name, "jQuery('#{$id}').on('{$name}', {$handler});");
    }

it similar: $('ul').on('change', function () { alert('123'); }); => not work.

answered Jul 24 '13 at 03:57

Thanh Khánh

621
1
9
21

Ok! Thanks you so much! I have not yet read the code. But I have just found a solution! That is every tabs has a content with id. So on event 'show', we just check the tab which is active... ^_^ – Tín Phạm Jul 24 '13 at 04:50

score 0 · Answer 3 · edited May 23 '17 at 11:59

TbTab is working fine but there is no change event for Bootstrap Tab.
You can find Bootstrap Tab js documentation (applicable events) here:

So your code needs a little change to work:

$this->widget('bootstrap.widgets.TbTabs', array(
        'type' => 'tabs',
        'tabs' => array(
            array('label' => 'Trainer Modules', 'content' => 'content tab 1',
            array('label' => 'Default Modules', 'content' => 'content tab 2',
        ),
        'events' => array(
            'show.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is about to be shown.
            'shown.bs.tab' => "js:function(tab){console.log(tab); alert(tab);}" // Occurs when the tab is fully shown (after CSS transitions have completed)
        )
    ));

Real credit should go to Another Stack Question

Yii Bootster - TbTabs Change Tab Event

3 Answers3