Search code examples
javascriptdojotabcontainercontentpane

dojo 1.10.4 dijit/layout/Tabcontainer not rendering first contentpane's content

dojo 1.10.4, sitemesh 2.4.2

I am trying to use dojo 1.10.4 in my project to work with sitemesh 2.4.2, spring framework 4.1.

When I try to put a tabcontainer in my content section (header, content and footer style defined by sitemesh). I never get my tabcontainer's first contentpane's content shows up, it is alway dis-appear. test code as: 

<div style="width: 350px; height: 300px">
  <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
      Lorem ipsum and all around...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
      Lorem ipsum and all around - second...
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data-dojo-props="closable:true">
      Lorem ipsum and all around - last...
    </div>
  </div>
</div>

javascript as:

<script type="text/javascript">
  require(["dojo/parser", "dojo/aspect", "dijit/layout/TabContainer", "dijit/layout/ContentPane","dojo/domReady!"], function(parser, aspect) {
    parser.parse();
  });
</script>

The result as:

dojo first contentpane's content lost in tabcontainer

other tabbed contentpane display properly.

Eidt

This is a very funny issue, it was caused by javascript; I changed the javascript to:

<script type="text/javascript">
  require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);
</script>

Then, it works fine.

Solution

  • This issue appears when you already parsed the TabContainer and you're trying to parse it again. What happens is that the new widget cannot be created because it already exists, and so your first tab will not work correctly.

    If you open your browser console (usually F12), you'll even see the error:

    dojo/parser::parse() error Error: Tried to register widget with id==dijit_layout_ContentPane_0 but that id is already registered

    To fix this you should try to look for other parser.parse() statements, or perhaps you're parsing the DOM on load already (using parseOnLoad: true) if that's the case, you don't need to do additional parsing.