View Full Version : change a div when onclick event a tab of a content panel

1 Nov 2006, 10:01 AM
wow.. what title!!!


i have my contentpanel:

layout.add('center', new YAHOO.ext.ContentPanel('center3', {title: 'Forum', closable: true}));

now i would like to link a function when u click on the tab named tab, so that i can update a div..
something like this:

layout.add('center', new YAHOO.ext.ContentPanel('center3', {title: 'Forum', closable: true, onclick: function(){alert(123)}}));

this don't show 123 when i click on forum label tab, i would like :D

1 Nov 2006, 2:46 PM
Jack may chime in with another solution here, but rather than look for an 'onclick', you could look for the 'activate' event. This is only going to fire on the 1st click, because once a tab is activated, clicking again doesn't really mean anything, unless you click on sub-element of the tab that handles a click, and then bubbles it all the way up to the tab.

get a ref to your panel, then

//this needs to happen after the panel is added to the region, otherwise it will fire one time //immediately b/c the tab is activated upon add.
panel.on('activate', myfunc, this, true);

function myfunc(panel, obj) {

1 Nov 2006, 10:07 PM
That's exactly what I would have suggested. :)

2 Nov 2006, 12:29 AM

it's so simple... but it don't work.. i did this:

layout.add('center', new YAHOO.ext.ContentPanel('center3', {title: 'Forum', closable: true}));


function act3(panel,obj){alert(123)}

also adding the " to function arg name it don't wont to work.. what i wrong?

ps: is there a documentation for borderLayout?

2 Nov 2006, 12:38 AM
This is pretty much the same situation I've just been in. Have a look at the advice Jack offered to me as this worked great:


2 Nov 2006, 12:55 AM
hi, thx for the reply
i have read, but nothing changed,it give me error in js console saying that "this.events is not defined"

i used this code:

Example = function(){
return {
init : function(){
[....] // omissions to shorten the code :p
layout.add('center', new YAHOO.ext.ContentPanel('center3', {title: 'Forum', closable: true}));



act3 : function(){

YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

2 Nov 2006, 1:45 AM
What version are you using? The latest beta? Can you put a link up somewhere? I see nothing obvious in your code so it has to be a weird issue. That event works though, I use it extensively.

2 Nov 2006, 2:12 AM
jack, i know i'm your worse incubus.. :roll:


this is the page to obtain:


and this is the page with code for the "onActivate" event:


i'm in your hands...

as usual.. :lol:

2 Nov 2006, 8:10 AM
You might try splitting this line and see if you really have a ref to your panel


var p = layout.getRegion("center").getPanel("center3");

This is the issue I initially had - you're creating a panel with a title='center3', not id='center3'. getPanel is looking for an id, not a title (at least in this beta).

I didn't try this with your code, but it's basically how I got around it in my code:

var p = new YAHOO.ext.ContentPanel('center3', {title: 'images/tforum.gif Forum', closable: true});

layout.add('center', p);
p.on('activate', Example.act3,Example,true);

Note also that if you add the event to the panel before you add the panel to the layout, the event will fire once immediately. This is b/c activate is fired upon add - this may or may not be what you want.

2 Nov 2006, 8:39 AM
thx a lot for reply but i have no result trying your code.. :? u can see it in test.htm.. :cry: nathing to do.. :(

2 Nov 2006, 9:30 AM
There may be something else causing your problem. I see that you're getting a 'this.events has no properties' in yui-ext.js when the page loads. Also, you're specifying that the tabs should be closable, but the close icon isn't visible either.

Maybe you could simplify your test page a little further and see if we can get to the root of the problem.
Remove the toolbar stuff and the tab title images, and let's see if we can get the tabs to render correctly with the close icon.

2 Nov 2006, 10:04 AM
ok.. i semplified a little the code.. nothing change.. :?

the close icon i read somewhere that need to pass an arg to be shown.. but i don't remember where i have read :shock:

2 Nov 2006, 10:24 AM
You're still looking at test.htm,right? This now looks like your full page, but it seems to be working in that it's not getting a JS error anymore.

It looks like your 'activate' code is commented out though.

2 Nov 2006, 10:44 AM
yes, of course i commented to see the close icon problem.. but probably is a configuration set problem or a linked image lost

2 Nov 2006, 2:01 PM
Hi luke, can you uncomment the code so I can see the problem? Thanks.

2 Nov 2006, 2:22 PM
ok, i uncommented the code that create the problem..

so here is the page, as it could be:


and this is the page with code for the "onActivate" event that broke the correct layout:


2 Nov 2006, 3:01 PM
As I said in my original post, you have an old version of the code. Get the latest beta at the end of Part 2.

2 Nov 2006, 4:36 PM
ok sorry.. now i'm going to sleep. tomorrow i will change the code.. :D

3 Nov 2006, 1:13 AM
this morning i wake up with a big big smile.. thinking i will risolve the problem downloading the beta release... :D

but as u can see in the link above no changes in the situation.. :?

jack, is it possible the ghosts take my pages :shock:

3 Nov 2006, 1:19 AM
You still have the old version. I link directly and view the source of your yui-ext_33.js file and it is old (and it doesn't have this.events).

Download this:


And the replace your link to yui-ext_33.js with yui-ext.js from this file.

3 Nov 2006, 1:24 AM
yes jack.. :lol:
i was doing just this.. 8)
i have seen.. :?
i know what u are thinking.. i'm stupid i know.. it's true :cry:

now i'm going toplay with the basicdialog :twisted:

3 Nov 2006, 1:40 AM
Haha, good luck. I'm going to bed!

3 Nov 2006, 1:42 AM
so.. :roll: good night.. here now is 10:44 :shock: :lol:

3 Nov 2006, 8:23 AM
ok.. i'm on th way..
if u look at http://fantaluke.net/sc/test/test.htm and u "activate" the tab labeled forum on the west panel it will appear [object Object] :shock:

what i tried to do?

it is simple for you.. not for me... :oops:


when u click on forum tab on the west panel it sould be appear the content of te nav_hm div so the text: "menu home"...

i'm so stupid i now.. :cry: i looked at all the member of the object but i not found the text i'm looing for..

may someone help me, please?

( i think it is also simple to load the nav_hm div in west panel on page load as a content panel not shown and on the activate tab event show up it.. it could be a way but i dont know how to implement :? )

ok.. for the second solution i think something like:

layout.add('west', new YAHOO.ext.ContentPanel('nav_hm', {title: 'Nav home', fitToFrame:true, closable:false}));



but of course if u see the code i cannot have access to layout inside act3, how can i get access?

3 Nov 2006, 12:45 PM
Take a look at my examples again. You will need to create a scope for you variables so they are accessible.

var Example = function(){ // start "Example" scope
var layout; //<-- declare vars here avail to all functions in the scope

// return a public interface that anything can access
return {
init : function(){
layout = ... // initialize layout var
foo : function(){
layout.getRegion(...) // foo() can access layout too
}();// <-- end scope

3 Nov 2006, 1:15 PM
i've tried with this[layout] but of course it didn't work.. :D

jack have u some good guide to learn this basics of js (i'm a php/asp/mysql developer) 'cause i don't know why something of js i cannot fix in mi mind... :( :cry:

thx a lot

4 Nov 2006, 12:49 AM
ok.. i tried the code u posted.. it didn't work :cry:

when i click on the home tab the debbuger says "layout has no proprieties".. :shock:

u can see the code: http://fantaluke.net/test/test.htm

4 Nov 2006, 1:21 AM
That link 404s btw (the first one worked).

Remove the "var" from in front of the layout declaration:

var layout;
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {

You have correctly created the layout variable in scope (the first layout) but by putting "var" on the second layout, you are creating a new variable that is scoped to that function and not setting the first layout variable. Make sense? Just remove that "var" in bold above.

Using var is a good thing most of the time, but in this case you want the scope to go up.

4 Nov 2006, 2:07 AM
of course u're right.. i'm so sorry i'm wrong.. :oops:

now it works perfectly.. :P

thx man!!!