Yii Framework Forum: CTabView change active tab - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

CTabView change active tab Rate Topic: -----

#1 User is offline   drake 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 06-May 09

Posted 06 May 2009 - 06:56 AM

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??
0

#2 User is offline   hefi 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 34
  • Joined: 21-January 10
  • Location:Hungary

Posted 30 March 2012 - 09:18 AM

View Postdrake, 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 :)
0

#3 User is offline   riyazMuhammed 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 13-September 12
  • Location:Bangalore

Posted 03 October 2012 - 01:08 AM

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

#4 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 03 October 2012 - 02:00 AM

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

#5 User is offline   riyazMuhammed 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 13-September 12
  • Location:Bangalore

Posted 03 October 2012 - 02:23 AM

View Posthefi, 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 :)
0

#6 User is offline   riyazMuhammed 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 13-September 12
  • Location:Bangalore

Posted 03 October 2012 - 02:33 AM

View Postbennouna, 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 :)
0

#7 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,165
  • Joined: 05-January 12
  • Location:Morocco

Posted 03 October 2012 - 02:46 AM

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

#8 User is offline   riyazMuhammed 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 13-September 12
  • Location:Bangalore

Posted 03 October 2012 - 03:00 AM

View Postbennouna, 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'
0

#9 User is offline   riyazMuhammed 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 42
  • Joined: 13-September 12
  • Location:Bangalore

Posted 03 October 2012 - 04:19 AM

View PostriyazMuhammed, 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 ? :(
0

#10 User is offline   parkerfrank 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 02-October 12

Posted 26 November 2012 - 01:33 AM

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
0

#11 User is offline   willbelair 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 08-April 11

Posted 13 December 2012 - 12:16 PM

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.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users