tabpanel content and javascript

[jbowman]

Is there a way to return and evaluate javascript as the content of a tab panel? What I'm doing is using the tab panel as a sidebar tool, and would like to build menu's using yahoo's menu system as the body.

I'd prefer to build the menus using javascript, but I think, looking at it, I might be able to use a callback if I build them from markup?

[jack.slocum]

I take it you are looking to load the menu items using Ajax?

If yes, using a callback (or the UpdateManager's onUpdate event) and building them from markup is probably the easiest (and best) route.

If you aren't then you can build the menus in JS as you prefer and then render them to the tab body content using menu.render('your-tab-content-id').

[jbowman]

option a looks more like what I'm going to need, thanks.

btw, this extension library is very nice, and thanks for sharing your hard work.

[jack.slocum]

No problem. I'm glad you are finding it useful.

[jbowman]

ok I'm still trying to wrap my head around javascript...

Right now I have this -


var modulesTab = navTabs.addTab('modules', 'Modules');
var modulesTabUpdater = modulesTab.getUpdateManager();
modulesTabUpdater.setDefaultUrl('/sidebar.php?mode=modules');
modulesTab.onActivate.subscribe(modulesTabUpdater.refresh, modulesTabUpdater, true);


my default url can either return pure javascript which I can eval, or I can return the html to then create a menu from and render.

I'd prefer to return javascript and eval it, because I'm using a lot of configuration options to set fields as disabled, checked, etc etc. I had it working using the menu system, but after finding this tab panel I'm trying to build a top nav bar that's tabbed which will contain various menus.

Unfortunately, I'm still pretty new to javascript, and as I said, having trouble wrapping my head around it.

[jack.slocum]

That looks ok to me. It will refresh every time the tab is activated though. You can probably shorten it up using the shortcut method setUrl:


var modulesTab = navTabs.addTab('modules', 'Modules');
modulesTab.setUrl('/sidebar.php?mode=modules', null, true);


The 3rd argument, true, instructs the TabPanelItem to load the url only once, not every time the tab is clicked. If it's just menu this is probably the best idea.

If you want to eval the response of sidebar.php?mode=modules, you would do something like this:


// create basic renderer
var EvalMenu = {
render : function(el, response){
eval(response.responseText);
};
};
var modulesTab = navTabs.addTab('modules', 'Modules');
modulesTab.getUpdateManager().setRenderer(EvalMenu);
modulesTab.setUrl('/sidebar.php?mode=modules', null, true);


This will cause it to eval whatever is returned by the server. I'm not sure why you are doing it this way though?

Why not include your menu javascript in a standard script tag, build your menus like the Yahoo examples, then have some code like this:


// ... build your menu in JS like you want
// then call:
yourMenu.render('modules');

// then when you are initializing your tabs you can use a standard tab
var modulesTab = navTabs.addTab('modules', 'Modules');


Is that an option?

Jack

[jbowman]

I was looking at doing it similar to that, but from what I can see, my modules div didn't exist until the tab was activated. Though, I could be wrong, I was trying lots of different things last night trying to figure it out.

To give you an idea of what I'm doing... I'm doing basically a 2 layer menu, one layer with tabs, the other layer with menus. Everything is basically being dynamically created, depending on the page loaded.

For example - All pages will have a navigation tab, with a submenu with links to various parts of the side

Then some pages will have other tabs... my profile editor with have Layout and Modules tabs that will have submenus underneath.. my Profile views page may have a Contact tab..

To better visually show it... take the profile editor page, with Navigation as the active tab, it will look like

Navigation Layout Modules
Home Forums Groups FAQ Search

then if you activate the Layout tab you might have something like

Navigation Layout Modules
Background Text Style Columns


My backend uses a template system I use to generate the html and javascript, which I'm also using for the ajax style requests in order to keep my display files somewhat organized.

[jack.slocum]

I see. So the tab item body isn't coming from existing markup, it's being created dynamically. In that case your have to swap them:


// ... build your menu in JS like you want

var navTab = navTabs.addTab('modules', 'Modules');
navTab.setUrl('foo.php');
navTab.onActivate(function(){
homeMenu.render('modules');
forumsMenu.render('modules');
groupsMenu.render('modules');
....
});


Something like that might work. If you are only loading each tab once instead of every activation, you would listen to the navTab.getUpdateManager().onLoad event instead of onActivate so you only render the menus once.

Personally I would probably render the menus to document.body when the page loaded and then have the sub menus under each tab just call to those existing menus. Initial load time might be a little slower though.

[jbowman]

I pretty much got it, and got a better understanding of how things work. Right now I'm using the eval method, because I mixed my code with one of the menubar examples, but I think I'm going to look at building the menus with markup and doing a render next.

One note, currently using the special renderer to eval the javascript, I had to make one quick mod. It wasn't getting rid of the "Loading..." text, so I tweaked it to


var EvalMenu = {
render : function(el, o){
el.update("");
eval(o.responseText);

}
};


Appreciate the help in understanding how the system works. Looking forward to more updates to your extension to the toolkit.