[drake]

Hi everyone,
I use CTabView in my web application but I cannot figure out how to change the selected tab with a link or button. Any ideas??

[hefi]

drake, on 06 May 2009 - 06:56 AM, said:

Hi everyone,
I use CTabView in my web application but I cannot figure out how to change the selected tab with a link or button. Any ideas??

Here's my solution. I'm not a jQuery expert, so my implementation is pretty dummy

The process it the following:

1. Make a copy of yiitab.js

Copy yii/framework/web/js/source/jquery.yiitab.js to protected/extensions/my.jquery.yiitab.js

2. Modify my.jquery.yiitab.js

Insert this snippet

$('.tabswitchlink').click(function() {
	var href=$(this).attr('href');
	var pos=href.indexOf('#');
	activate(href);
	if (!$(this).hasClass("tabswitchjump")) {
		if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
			return false;
	}
});

after this part

			// activate a tab based on the current anchor
			var url = decodeURI(window.location);
			var pos = url.indexOf("#");
			if (pos >= 0) {
				var id = url.substring(pos);
				if (this.find('>ul a[href="'+id+'"]').length > 0) {
					activate(id);
					return;
				}
			}

This modification set the tab switch event to any HTML tag that has tabswitchlink class. If the tabswitchjump class is set too then the browser will scroll to the appropriate CTabView widget.


3. Modify the config

Edit protectedconfig/main.php in order to make Yii use my.jquery.yiitab.js instead of the core jquery.yiitab.js script:

	'components'=>array(
        'clientScript'=>array(
            'packages'=>array(
                'yiitab'=>array(
                    'basePath'=>'application.extensions',
                    'js'=>array('my.jquery.yiitab.js'),
                    'depends'=>array('jquery'))),
            ),
)

4. Example usage

Yii view:

        $this->widget('system.web.widgets.CTabView',
          array('tabs'=>
array(
    'tab1'=>array(
          'title'=>'tab 1 title',
          'view'=>'view1',
          'data'=>array('model'=>$model),
    ),
)));

<a href="#tab1" class="tabswitchlink tabswitchjump">scroll and switch to #tab1</a> // ideal for a link outside the tab
<a href="#tab1" class="tabswitchlink">switch to #tab1</a> // ideal for a link inside the tab

Any improvements are welcome

[riyazMuhammed]

Hi Guys, any new update for this issue without changing the core files ?

[bennouna]

Technically the fellow member implementation is an extension to core files, so no harm there.

[riyazMuhammed]

hefi, on 30 March 2012 - 09:18 AM, said:

Here's my solution. I'm not a jQuery expert, so my implementation is pretty dummy

The process it the following:

1. Make a copy of yiitab.js

Copy yii/framework/web/js/source/jquery.yiitab.js to protected/extensions/my.jquery.yiitab.js

2. Modify my.jquery.yiitab.js

Insert this snippet

$('.tabswitchlink').click(function() {
	var href=$(this).attr('href');
	var pos=href.indexOf('#');
	activate(href);
	if (!$(this).hasClass("tabswitchjump")) {
		if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
			return false;
	}
});

after this part

			// activate a tab based on the current anchor
			var url = decodeURI(window.location);
			var pos = url.indexOf("#");
			if (pos >= 0) {
				var id = url.substring(pos);
				if (this.find('>ul a[href="'+id+'"]').length > 0) {
					activate(id);
					return;
				}
			}

This modification set the tab switch event to any HTML tag that has tabswitchlink class. If the tabswitchjump class is set too then the browser will scroll to the appropriate CTabView widget.


3. Modify the config

Edit protectedconfig/main.php in order to make Yii use my.jquery.yiitab.js instead of the core jquery.yiitab.js script:

	'components'=>array(
        'clientScript'=>array(
            'packages'=>array(
                'yiitab'=>array(
                    'basePath'=>'application.extensions',
                    'js'=>array('my.jquery.yiitab.js'),
                    'depends'=>array('jquery'))),
            ),
)

4. Example usage

Yii view:

        $this->widget('system.web.widgets.CTabView',
          array('tabs'=>
array(
    'tab1'=>array(
          'title'=>'tab 1 title',
          'view'=>'view1',
          'data'=>array('model'=>$model),
    ),
)));

<a href="#tab1" class="tabswitchlink tabswitchjump">scroll and switch to #tab1</a> // ideal for a link outside the tab
<a href="#tab1" class="tabswitchlink">switch to #tab1</a> // ideal for a link inside the tab

Any improvements are welcome

Awesome Work Thanks So much @ hefi

[riyazMuhammed]

bennouna, on 03 October 2012 - 02:00 AM, said:

Technically the fellow member implementation is an extension to core files, so no harm there.

Yeah No harm and works like charm.

is there a way that I can do like $.fn.yiitab.activate(<tab id to switch >);

because i have a situation where I want to switch the tab after my ajax success event.

Thanks

[bennouna]

Yes it seems doable. Have you tried it? I guess you should include the hash in the id btw.

[riyazMuhammed]

bennouna, on 03 October 2012 - 02:46 AM, said:

Yes it seems doable. Have you tried it? I guess you should include the hash in the id btw.

Hmmm @bennouna I tried $.fn.yiitab.activate("#tab4");

then I get a error in js(I mean nothing happens on screen . when i see in console of chrome ) saying yiitab object doesnot have method activate

Following is detailed report

Uncaught TypeError: Object function () {

function activate(id) {
var pos = id.indexOf("#");
if (pos>=0) {
id = id.substring(pos);
}
var $tab=$(id);
var $container=$tab.parent();
$container.find('>ul a').removeClass('active');
$container.find('>ul a[href="'+id+'"]').addClass('active');
$container.children('div').hide();
$tab.show();
}

this.find('>ul a').click(function(event) {
var href=$(this).attr('href');
var pos=href.indexOf('#');
activate(href);
if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
return false;
});

// activate a tab based on the current anchor
var url = decodeURI(window.location);
var pos = url.indexOf("#");
if (pos >= 0) {
var id = url.substring(pos);
if (this.find('>ul a[href="'+id+'"]').length > 0) {
activate(id);
return;
}
}
$('.tabswitchlink').click(function() {
var href=$(this).attr('href');
var pos=href.indexOf('#');
activate(href);
if (!$(this).hasClass("tabswitchjump")) {
if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
return false;
}
});


} has no method 'activate'

[riyazMuhammed]

riyazMuhammed, on 03 October 2012 - 03:00 AM, said:

Hmmm @bennouna I tried $.fn.yiitab.activate("#tab4");

then I get a error in js(I mean nothing happens on screen . when i see in console of chrome ) saying yiitab object doesnot have method activate

Following is detailed report

Uncaught TypeError: Object function () {

function activate(id) {
var pos = id.indexOf("#");
if (pos>=0) {
id = id.substring(pos);
}
var $tab=$(id);
var $container=$tab.parent();
$container.find('>ul a').removeClass('active');
$container.find('>ul a[href="'+id+'"]').addClass('active');
$container.children('div').hide();
$tab.show();
}

this.find('>ul a').click(function(event) {
var href=$(this).attr('href');
var pos=href.indexOf('#');
activate(href);
if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
return false;
});

// activate a tab based on the current anchor
var url = decodeURI(window.location);
var pos = url.indexOf("#");
if (pos >= 0) {
var id = url.substring(pos);
if (this.find('>ul a[href="'+id+'"]').length > 0) {
activate(id);
return;
}
}
$('.tabswitchlink').click(function() {
var href=$(this).attr('href');
var pos=href.indexOf('#');
activate(href);
if (!$(this).hasClass("tabswitchjump")) {
if(pos==0 || (pos>0 && (window.location.pathname=='' || window.location.pathname==href.substring(0,pos))))
return false;
}
});


} has no method 'activate'

Rather I could do,

$(".yiiTab").find("ul a").removeClass("active");
                                                  
                         $(".yiiTab").find("ul a.[href=#tab4]").addClass("active");
                         $("#tab3").hide();
                         $("#tab4").show();

and obtain the same effect but still why cant I call $.fn.yiitab.activate('#tab4') or so ?
Have any idea ? Or is my syntax is wrong ?

[parkerfrank]

fyi - your script is missing the closing bracket.

$click_script = <<<script
$('#tab2').click(function(){
google.maps.event.trigger(gmap, "resize");
}) // <------------------------------------------------------------------------------------------Notice the bracket here
SCRIPT;
Yii::app()->getClientScript()->registerScript("resizemap_js", $click_script, CClientScript::POS_END);

Cheers

[willbelair]

Hello,
Thank you for posting the script. Could someone please help me to get this to work? I did exactly as posted. My yii version is 1.1.6 . Do I need to update to the latest version? When click on the link, the url shown in the address bar is myyii/#tab1 , and I realize that when having the #tab1, it won't work.
Thank you.