Difference between #4 and #5 of Handling Bootstrap active tabs in Yii via URL

unchanged
Title
Handling Bootstrap active tabs in Yii via URL
unchanged
Category
How-tos
unchanged
Tags
bootstrap, tabs, jquery
changed
Content
As a lead developer at [Mutable Labs](http://www.mutablelabs.com "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]
<?php if(CHttpRequest::getParam("tab") != null): ?>
		
	<script>
			
		$(document).ready(function() {
			$('#tabs a:contains("<?php echo
CHttpRequest::getParam("tab"); ?>")').tab('show');
		});
			
	</script>
		
<?php endif; ?>
[/php]
~~~

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]
<?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.