Hiding and Showing a Dijit ContentPane in a TabContainer

There is no simple method of hiding and showing a Dijit ContentPane.

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.

For example assuming your page has this:

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html]

……

[/html]

You can hide MyTab like this:

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
saveMyTabWidget = dijit.byId(‘MyTab’);
dijit.byId(‘MyTabContainer’).removeChild(dijit.byId(‘MyTab’));
[/javascript]

And then, to redisplay, you’ll want to check if the saveMyTabWidget variable has been set, and if so, add it back as a child to the TabContainer, like this:

[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][javascript]
if (typeof saveMyTabWidget != “undefined”) {
saveMyTabWidget.setHref(theURL);
dijit.byId(‘MyTabContainer’).addChild(saveMyTabWidget, 0);
saleProductsTabWidget = undefined;
}
[/javascript]

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Posted

in

by

Comments

19 responses to “Hiding and Showing a Dijit ContentPane in a TabContainer”

  1. […] 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. […]

  2. Rick O'Shay Avatar
    Rick O’Shay

    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.

    1. Devon Avatar

      Rick,

      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.

  3. Sharon Avatar
    Sharon

    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?

    1. Devon Avatar

      By “java” to you mean a scriptlet? Or something else?

      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.

  4. Sharon Avatar
    Sharon

    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.

    1. Devon Avatar

      Are you reloading the tab contents after all the changes are saved?

      Set preventCache to true, and then call refresh() on the 3rd tab, should work…

  5. Vov9 Avatar
    Vov9

    Thank you!

  6. Gowthaman Avatar
    Gowthaman

    This blog helped me a lot. Thanks.

  7. Morree Avatar
    Morree

    Nice article! i had the same problem..

    thanks

  8. road-movie Avatar
    road-movie

    I didn’t like the approach, but after a long search this is the only way it works. Thanks a lot!

  9. xyz Avatar

    its tested the contentPane

  10. Madhu Avatar
    Madhu

    Doubt – Let say I have 3 tabs where on click of tab1 loads a jsp. On submit of this jsp it hits the server and returns an other JSP which should be loaded in the same place. how to do this?

    1. Devon Avatar

      You have to make the form submission an AJAX submit, not a normal browser submit. Do that, and then refresh the tab content and set preventCache to true. Should work fine.

  11. thunyaluck Avatar
    thunyaluck

    Thanks a lot!

  12. Nikita Avatar
    Nikita

    I have a doubt in this line “saveMyTabWidget.setHref(theURL);”.
    which URL we need to give here ?

    1. Devon Avatar

      The URL of the tab content to be fetched via AJAX.

  13. OammieR Avatar
    OammieR

    Thank you so much my friend.

  14. Dave Avatar
    Dave

    Thanks, man – works great.

Leave a Reply

Your email address will not be published. Required fields are marked *

PHP Code Snippets Powered By : XYZScripts.com