Yii 1.1: Handling Bootstrap active tabs in Yii via URL

6 followers

As a lead developer at Mutable Labs I found that when using the Yii Bootstrap tabs component you will sometimes want to direct the user to a specific tab and not necessarily the first tab. Yii Bootstrap already provides the "active" variable so you can define whether the tab is the active tab or not in PHP. I generally find though that a PHP solution to this problem is rather cumbersome as every tab component will need the PHP code inserted or you will have to extend the tab component somehow to do it.

Anyways I found that a JQuery solution worked the best for me and here it is. Please make sure you have given your tabbed area an id of "tabs", if you have multiple tabbed areas then using this code again for the other tabbed area is an option. Just place this code into your "layout" or "header" file ...

<?php if(CHttpRequest::getParam("tab") != null): ?>
 
    <script>
 
        $(document).ready(function() {
            $('#tabs a:contains("<?php echo CHttpRequest::getParam("tab"); ?>")').tab('show');
        });
 
    </script>
 
<?php endif; ?>

Then all you have to do is set the "tab" get variable in the url. This will then display the correct tab on your page when the page loads. Here is an example of how to use this, say you have this code for your tabs ...

<?php $this->widget("bootstrap.widgets.TbTabs", array(
    "id" => "tabs",
    "type" => "tabs",
    "tabs" => array(
        array("label" => "Books", "content" => "Some content", "active" => true),
        array("label" => "Authors", "content" => "Some content"),
    ),
 
)); ?>

The url to call the tab should be something like ...

index.php?r=controller/action&tab=Authors

The tabs will now use the "Authors" tab as the active tab and not the "Books" tab on page load. If no GET param for the tab is specified then it will use the default active tab which in this example is the "Books" tab.

Total 6 comments

#17006 report it
xJose at 2014/04/22 03:32pm
it worked

thanks :D

#16694 report it
almix at 2014/03/20 05:49am
if you want use tab id instead of label

My labels is not easy (there are numbers in it which is calculated, and also i use russian language for labels), so I'm using tab id instead of labels like here:

<?php if(CHttpRequest::getParam("tab") != null): ?>
        <script>
            $(document).ready(function() { 
                $('#tabs a[href*="<?php echo CHttpRequest::getParam("tab"); ?>"]').tab('show');
            });
        </script> 
    <?php endif; ?>
#11612 report it
JamesBarnsley at 2013/01/22 10:17pm
HI

No problem.

#11611 report it
Peter JK at 2013/01/22 10:01pm
it works now... thank you

Allright JamesBarnsley..

It works now... thank you for your nice tips.

#11574 report it
JamesBarnsley at 2013/01/21 08:03am
Not sure

Can you post anymore of your code? I have updated the article to include an example of use, please check it out.

When I mentioned the "ID" I meant the ID of the whole tab interface not ID's of individual tabs. The url finds the tab through the label of the tab.

#11572 report it
Peter JK at 2013/01/21 07:13am
great, but...

but it doesn't work for me..

is there something I missing?

$this->widget('bootstrap.widgets.TbTabs', array(
'type'=>'tabs',
'tabs'=>array(
array('id'=>'tab1',...,
array('id'=>'tab2',...,
),
));

this is the link...

echo CHtml::link($data->employee_name_r, Yii::app()->createUrl('/employee/view', array('id'=>$data->id,'#'=>'tab2')));


Update: The code should be like this

$this->widget('bootstrap.widgets.TbTabs', array(
'type'=>'tabs',
'tabs'=>array(
array('id'=>'tab1','label'=>'Detail', ..., //James use label instead of id
array('id'=>'tab2','label'=>'Career', ...,
),
));

echo CHtml::link($data->employee_name_r, Yii::app()->createUrl('/employee/view', array('id'=>$data->id,'tab'=>'Detail'))); // '#' probably work on original CJuiTabs but not TbTabs

Leave a comment

Please to leave your comment.

Write new article