Question

On the JSTL page I have following divs

<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;" doLayout="false" id="dojoTabbedPane" >
            <c:forEach items="${summariesMap}" var="summaryEntry">
                <div dojoType="dijit.layout.ContentPane" title="${summaryEntry.key}">

I try to find all divs under (including dojoTabbedPane) in order to recersively destroy all the contentPane under it. Then I can use jQuery.load() to reload contents and use

dojo.parser.parse(dijit.byId("dojoTabbedPane"));

to re-parse the component to make sure the tabbedPane can be rendered(otherwise it doesn’t and cause memory leak or error)

Here the question is:
(1) Am I on the right track to re-parse the dojo TabbedContainer?
(2) Why each time the findWidgets function just return array with size 0?

Thanks in advance.

Answer 1

I’ll answer 2 first: because dijit.findWidgets expects a DOM node, not a widget. If you need to find all widgets inside another widget, you can use getDescendants instead:

var descWidgets = dijit.byId("dojoTabbedPane").getDescendants();

Onto question 1: First off: if you want to destroy all the tabs in a TabContainer, you can use :

dijit.byId("dojoTabbedPane").destroyDescendants();

Now, if I understand you correctly, you subsequently grab a string of HTML from the server (using jQuery), and want to add it to the TabContainer. This new content contains several ContentPane divs, and you want these to become the new tabs in the TabContainer.

I may be wrong here, but I don’t think that’s doable without some gnarly hack. Once you’ve parsed/instantiated a TabContainer, you should add tabs using addChild, passing instantiated ContentPanes.

This means that if you get new HTML content like this from the server (via your jQuery load):

<div dojoType="dijit.layout.ContentPane" title="new tab1">foo</div>
<div dojoType="dijit.layout.ContentPane" title="new tab2">bar</div>

.. then your best bet is to remove the old TabContainer and make a new one, then parse the whole thing. If you’re able to change the content you get from your server, perhaps you can simply wrap that in <div dojoType="dijit.layout.TabContainer....