[SOLVED] get the currently selected tab of TbTabs widget

lgastmans · October 21, 2014, 10:02am

I would like to get the currently selected tab from the TbTabs widget.

I have the widget declared in a view:




	$this->widget('bootstrap.widgets.TbTabs', array(

		"id" => "tabs",

		"type" => "tabs",

		'tabs'=>array(

    		array(

        		'active'=>true,

        		'label'=>'Main',

        		'content'=>$this->renderPartial("_form", array('model' => $model,),

        		true),

    		),

    		array(

        		'label'=>'Authors',

        		'content'=>$this->renderPartial("_formAuthors",

        			array(

        				'model' => $model,

        				'modelPlantAuthors' => $modelPlantAuthors,

        			),

        		true),

    		),

...

and on the click of a button in the view, I call the following js function:




Yii::app()->clientScript->registerScript('jsfuncs', "

	function goto(id) {

		console.log($('#tabs'));

	}

", CClientScript::POS_END);

I have looked at the object in the Firebug console, but could not find any property/function that gives the currently selected tab…

dragan.zivkovic · October 21, 2014, 6:29pm

I believe that all U should do is to add onShown or onShow to widget configurations.

onShown is fires on tab show after a tab has been shown, onShow is fires on tab show, but before the new tab has been shown.

Please check doc:

http://www.getyiistrap.com/api/source-class-TbTabs.html#12-127

lgastmans · October 23, 2014, 8:58am

Hi Dragan,

thanks for the response.

the ‘onShown’ or ‘onShow’ event fires when the TbTab widget is shown, but does not fire when each individual tab is clicked…

i guess i need an ‘onClick’ event for each tab…

the reason behind this is that i have a previous and next link on my view page, and i want the currently selected tab to remain selected when the page refreshes

i’m still looking

lgastmans · October 23, 2014, 9:18am

the definition in the docs for ‘onShown’:

i am not sure how to implement this.

i add it to my definition, like this:




	$this->widget('bootstrap.widgets.TbTabs', array(

		"id" => "tabs",

		"type" => "tabs",

		"onShown" => "some_function()",

...

and then i need to be able to access ‘event.target’ somehow ?

lgastmans · October 23, 2014, 10:40am

I now have the TbTabs defined with the ‘linkOptions’ set:




	$this->widget('bootstrap.widgets.TbTabs', array(

		"id" => "tabs",

		"type" => "tabs",

		'tabs'=>array(

  	array(

    	'active'=>true,

    	'label'=>'Main',

    	'content'=>$this->renderPartial("_form", array('model' => $model,),true),

				'linkOptions' => array('id'=>'main')

		),

  	array(

    	'label'=>'Authors',

    	'content'=>$this->renderPartial("_formAuthors",

    		array(

    			'model' => $model,

    			'modelPlantAuthors' => $modelPlantAuthors,

    		),

    	true),

				'linkOptions' => array('id'=>'authors')

  	),

...

and in the following javascript code I set a variable to the current tab:




Yii::app()->clientScript->registerScript("jsfuncs", "

	var activeTab = 'main';


	$('#main').click(function(){activeTab='main'});

	$('#authors').click(function(){activeTab='authors'});


", CClientScript::POS_END);

works fine, but now how to call the redirect in the onlick of a button?




			echo TbHtml::submitButton(

				TbHtml::icon(TbHtml::ICON_ARROW_LEFT),

				array(

					'submit'=>Yii::app()->createUrl('master/update', array('id'=>$model->previousID))

				)

			);

i’m a bit fried at this point…

lgastmans · October 23, 2014, 5:37pm

got it working with this code




Yii::app()->clientScript->registerScript("jsfuncs", "

	var activeTab = '".Yii::app()->session["currentTab"]."';


	$('#Main, #Authors, #Characteristics, #Texts, #Languages, #Synonyms, #Images').click(function(e){

		$.ajax({

			type: 'POST',

			url: '".Yii::app()->createUrl('master/saveTab')."',

			data: { curTab: e.currentTarget.id }

		})

		.done(function( msg ) {

			activeTab = msg;

		})

	});


	function goto(id) {

		var myObject = {id:id,tab:activeTab};

		var url = '".Yii::app()->createUrl('master/update')."';

		var urlParams = $.param( myObject );


		window.location = url+'&'+urlParams;

	}


", CClientScript::POS_END);

andjelko · November 18, 2014, 11:45am

Try this:




        $this->widget('booster.widgets.TbTabs', array(

                'id' => 'tabs',

                'type' => 'tabs',

                'events' => array(

                        'click' => "js:savetab"

                        'shown' => "js:goto()"

                 )...


Yii::app()->clientScript->registerScript("jsfuncs", "

        var activeTab = '".Yii::app()->session["currentTab"]."';


        var savetab = function(e){

                $.ajax({

                        type: 'POST',

                        url: '".Yii::app()->createUrl('test/saveTab')."',

                        data: { curTab: e.target.id }

                })

                .done(function( msg ) {

                        activeTab = msg;

                })

        }

        

        function goto() {  

                $('#'+activeTab).tab('show');

        }


", CClientScript::POS_END);