I (www.jamesbarnsley.com) 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.
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
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.
it works now... thank you
Allright JamesBarnsley..
It works now... thank you for your nice tips.
HI
No problem.
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; ?>
it worked
thanks :D
It's not working
on my booster widget. AFAIK, booster and bootstrap are basically the same thing, but it doesn't work on my booster tab widget. can you help me with this one?
where exactly do I have to paste the script?
and no matter what var I use as the tabs id or the tab parameter, the script isn't working.
help me out! :')
Help
Hi,
Can you paste the outputted HTML code for the tabs and the outputted JS code?
James.
Thank you for the response
Hi James
thank you for your response
so here are my codes
~~~
$this->widget('booster.widgets.TbTabs', array(
'type' => 'tabs', // 'tabs' or 'pills'
'justified' => true,
'tabs' => array(
array(
'label' => date("Y")-5,
'content' => $this->renderPartial('page1', array('param1'=>date("Y")-5,
model'=>$model, 'param2'=>$param2), TRUE ),
), array( 'label' => date("Y")-5, 'content' => $this->renderPartial('page1', array('param1'=>date("Y")-5, model'=>$model, 'param2'=>$param2), TRUE ), ), array( 'label' => date("Y")-5, 'content' => $this->renderPartial('page1', array('param1'=>date("Y")-5, model'=>$model, 'param2'=>$param2), TRUE ), ), array( 'label' => date("Y")-5, 'content' => $this->renderPartial('page1', array('param1'=>date("Y")-5, model'=>$model, 'param2'=>$param2), TRUE ), ), .....
The thing is.. there are links in page1 that should refer to the selected tab (the same view file), but will load a different model. but what happens is it will load the view file and the selected tab would be the default tab. what do you think? should I use Ajax update instead?
Help
Hi syf dmr,
Can you show me the HTML that the tabs produce?
i.e. the HTML source produced by the PHP.
James.
tables
it's just a table with data in it. the tabs filter the data based on year. and for each of the data record, there's a link where you can go deeper.
for example in level one I have list of countries, then if I click one of the country on the list, I could get the list of the cities in the country, in the same exact view, just with a new model containing the countries' cities.
Help
Try wrapping your PHP tab code in a HTML div like so ...
<div id="tabs">
// your tab php code here
</div>
Put the PHP in the tutorial in the head tags of the code.
<?php if(CHttpRequest::getParam("tab") != null): ?> <script> $(document).ready(function() { $('#tabs a[href*="<?php echo CHttpRequest::getParam("tab"); ?>"]').tab('show'); }); </script> <?php endif; ?>
still not working
I'm sorry but it's still not working.
so here's my code.
hope you can fix this for me. thank you
addition
should i put the script on the head tag of the layout file, or iin the same view file as the tabs?
Help - syf dmr
Hi,
The script should be in the layout head tag.
Do you have Skype? I can help you fix it on there through screen-share?
James.
Thanks!
Hi James sorry for the late, late, follow up
but I applied your suggestions with a little adjustment and it worked perfectly well, so thank you so much, I really do.
^^
Have a nice day!
regards,
syf
Hi syf
Hi syf,
Glad you go it working.
James.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.