PDA

View Full Version : Tabs inside Panel



norman64
23 Oct 2006, 9:12 AM
Hi,

I'm trying to create a tab component inside a Yahoo! Panel, and i'm having a lot of trouble with it javascript:emoticon(':oops:')
Embarassed

- The tabs in the panel are inheriting to style of the panel header (blue background). I'm only using the css that you used in your tabs example in your blog. Any advice in how to stop this behaviour?

- The panel is generated dynamically like this:



var inittabs=function(){
var tabs2 = new YAHOO.ext.TabPanel('tabcontainer2');
tabs2.addTab('tb1', "Tab page1");
tabs2.addTab('tb2', "Tab page2");
tabs2.activate('tb1');
}

function showPanel(id1,id2){

var popupsPanel =new YAHOO.widget.ResizePanel("midiv", { width:"600px",
height:"500px", fixedcenter: true,
constraintoviewport: true, underlay:"shadow",
close:true, visible:false, draggable:true,
modal:true,iframe :true} );

popupsPanel.setHeader('Header');
popupsPanel.setBody('');
popupsPanel.body.id = 'idbody';
popupsPanel.render(document.body);
popupsPanel.render();
popupsPanel.show();
var el = YAHOO.ext.Element.get('idbody');
var mgr=el.getUpdateManager();
mgr.update('ajaxserver.php','param1='+id1+'&param2='+id2);
mgr.onUpdate.subscribe(inittabs);
}
[code]
The tabs are working, but since I may have to call the panel several times (with diferent parameters) it keeps repeating the tab control (it show once per call, so at the third time I call the panel i see 3 tabs on top of each other), I'd like to show you but I don't have access to a live server.

The content of the panel is generated in ajaxserver.php acording to the parameters, including the divs that will later conform the tabs. The divs always have the same id (is this a problem?)

Thanks, and please excuse my english.

PS: The Resizable textarea is working like a charm in Firefox 1.5.0.7 :oops:

jack.slocum
23 Oct 2006, 2:06 PM
You don't want to recreate the panel every time. See this thread:

http://www.jackslocum.com/forum/viewtopic.php?t=145

norman64
24 Oct 2006, 4:45 AM
The problem seems to be that the generated content from the first call is still existing somewhere in the DOM. Where should I call destroy (and how :$) to make sure the dynamic content is completly eliminated from the content.

Thanks!

jack.slocum
24 Oct 2006, 10:03 AM
When you call setBody() it updates the innerHTML so it will destroy any existing content.

norman64
24 Oct 2006, 11:04 AM
Hi, I'm sorry to keep bothering you with this :(

You're right, the problem is not in the content, it seems that the tab control is the one persisting each time. I set the Tab control in the panel like this:

var inittabs=function(){
tabs2 = new YAHOO.ext.TabPanel('tabcontainer2');
tabs2.addTab('tb1', "Tab page1");
tabs2.addTab('tb2', "Tab page2");
tabs2.activate('tb1');
}

And I set the Panel using susbcribe in the update manager like this:

mgr.onUpdate.subscribe(inittabs);

And this is generating new tabs on top (or below?) the previous ones

Thanks!

UPDATE

Hi Jack, I've found the problem. The subscribe assignment was persisting across calls. I don't know if this is a bug or this is the excepted behaviour. Anyway, this is the "final" function:

function edit(param1,param2){
var assigned=false;
if(!popupsPanel){
assigned=true;
popupsPanel =new YAHOO.widget.ResizePanel("midiv", { width:"600px",
height:"500px", fixedcenter: true,
constraintoviewport: true, underlay:"shadow",
close:true, visible:false, draggable:true,
modal:true,iframe :true} );
popupsPanel.setHeader('Header');
popupsPanel.setBody('');
popupsPanel.body.id = 'idbody';
}
popupsPanel.render(document.body);
popupsPanel.render();
popupsPanel.show();
el = YAHOO.ext.Element.get('idbody');
mgr=el.getUpdateManager();
mgr.update('ajaxserver.php','param1='+param1+'&param2='+param2);
if(assigned)
mgr.onUpdate.subscribe(inittabs);
}

I know this isn't the most elegent way to achieve this, but until I get a better grip with your Yahoo! ext this will have to do...

Thanks!!

jbowman
24 Oct 2006, 4:44 PM
try



var inittabs=function(){
if ( !tabs2 ) {
tabs2 = new YAHOO.ext.TabPanel('tabcontainer2');
}
tabs2.addTab('tb1', "Tab page1");
tabs2.addTab('tb2', "Tab page2");
tabs2.activate('tb1');
}

jack.slocum
24 Oct 2006, 5:48 PM
Yes, that's the desired behavior. If you subscribe to it multiple times, it will notify you multiple times. :)

I'm glad you have it working. As you get more familiar with everything I'm sure it will come a little easier.

By the way, you can change this code:



mgr.update('ajaxserver.php','param1='+param1+'&param2='+param2);


to:



mgr.update('ajaxserver.php',{'param1': param1, 'param2': param2});


and it will build the query string for you (including url encoding all of the values).

norman64
25 Oct 2006, 2:33 PM
Thank's for the tip Jack, I'm getting familiar with your library (albeit sloooowly)

jbowman, I tried your code and the panel doesn't display any content, it seems that the tab control never get initiated when I do it like that.