CTabView change active tab
#1
Posted 06 May 2009 - 06:56 AM
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??
#2
Posted 30 March 2012 - 09:18 AM
drake, on 06 May 2009 - 06:56 AM, said:
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

#3
Posted 03 October 2012 - 01:08 AM
#4
Posted 03 October 2012 - 02:00 AM
#5
Posted 03 October 2012 - 02:23 AM
hefi, on 30 March 2012 - 09:18 AM, said:

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

#6
Posted 03 October 2012 - 02:33 AM
bennouna, on 03 October 2012 - 02:00 AM, said:
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

#7
Posted 03 October 2012 - 02:46 AM
#8
Posted 03 October 2012 - 03:00 AM
bennouna, on 03 October 2012 - 02:46 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'
#9
Posted 03 October 2012 - 04:19 AM
riyazMuhammed, on 03 October 2012 - 03:00 AM, said:
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 ?

#10
Posted 26 November 2012 - 01:33 AM
$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
#11
Posted 13 December 2012 - 12:16 PM
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.