If you are displaying a number of ContentPanes within a TabContainer you may need to hide (and possibly redisplay) one or more of the ContentPanes. For instance if the tabs are displaying information based on a selected product/user/etc… some tabs might not be relevant depending on the selected product/user/etc… If you can change the selected product/user/etc… via JavaScript/AJAX, you need to be able to hide and redisplay ContentPanes.

You can remove a ContentPane by calling removeChild on the TabContainer, however if you want to be able to re-display the ContentPane later, you need to save the Dijit widget to a global JavaScript variable before you remove it.

19 Comments

[…] Also, with Dijit tabs, there’s no easy way to hide a tab and resurrect it later. You have to save off the panel into a JavaScript variable, and reinstate it from that variable later. See how I handled hiding Dijit Tabs/ContentPanes in a TabContainer. […]

Removing a tab from location X and having it appear at location 0 is a rather poor design. Hiding a tab might be better but you cannot hide tabs, either. There was a section in a Dojo book on implementing this crashingly obvious feature (disabling) with the added comment that many have asked for it over many releases. Unfortunately the book’s solution is utterly useless except in the very special case presented.

Dojo tends to advance with new classes and services while they leave their pathetic documentation (read: please document the data types of parameters and return types of all methods for all classes) and short-comings to twist in the wind. There’s a really good chance Dojo will wither and die because the folks responsible for it have their heads in the sand.

the example of adding the tab back in location 0 was just an example. My actual code puts each tab back in the correct location it came from. Overall I dislike hiding tabs as I think it provides an inconsistent user interface, and would prefer to simple disable/grey out the unusable tabs, keeping the tab bar the same. However this is a requirement from the client, so….:)

I’m actually in the process of ripping out all the Dojo/Dojox/Dijit and replacing it with jQuery. So far it’s been a very pleasant change.

Does your “somePage.jsp” is just html content or including java code? As soon as I include java code in my jsp page, the tab displays nothing. My conclusion is that href in content works only with html content. Am I wrong?

Scriptlets shouldn’t matter at all, as Dijit is just making a http request from the browser, so as long as your somePage.jsp renders right on it’s own in your browser (i.e. point your browser to http://myhost.com/somePage.jsp and have the page display correctly, without server or browser errors or warnings) then it should work fine within Dijit.

never mind, it’s actually caused by some syntax error. However, I still have question here(which is a little off topic):
I have tab 1, tab 2, tab 3.
The user selects something in tab 1 and 2, then in tab 3, I’d like to see the changes. I saved the user selection successfully to mysql database. But I am having difficulty in displaying the new results in third tab. Thanks.