id already registered dojo

Question

I have a TabContainer, to which I m adding ContentPanels. My requirement demands that, I reload this TabContainer(which different content in ContentPanels) everytime, I click a new row on grid(generated from ajax in the same page). Initially, when I got the problem that id is already registered, I used destroyRecursive, as seen in suggested in one of the answers here. Now, after using that, I m getting the following result:

Result after I click on any of the row, the first time: Just like the way, I want, with the container and the 3 content panes.

Result after I click on any of the row, the second time, and any other times: A new container with 3 content panes is placed on top of the old one with 3 content panes. No matter, how many rows I click, the result always has 2 containers, with new one placed above the old one.

Below is the code, I have used.

    <div id = "tabsContainer">
    <div id="tabPanels" data-dojo-type = "dijit/layout/TabContainer"></div>
    </div>

  function getTabPanelsForTheRow() {
        require(["dijit/layout/TabContainer",
         "dijit/layout/ContentPane"], function (TabContainer, ContentPane) {
            var tc = new TabContainer({}, "tabPanels");

            var cp1 = new ContentPane({
                title: "Contacts",
                content: "These are the activities"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title: "Activities",
                content: "These are the activities"
            });
            tc.addChild(cp2);

            var cp3 = new ContentPane({
                title: "Opportunities",
                content: "We are known for our drinks."
            });
            tc.addChild(cp3);

            tc.startup();
        });
   }

    function destroyTabPanel() {
        require(["dijit/layout/TabContainer"], function (TabContainer) {
          var tp = dijit.byId("tabPanels");
          tp.destroyRecursive(true);
    });
}

Everytime, I click a row, I m calling destroyTabPanel() first, and then I m calling getTabPanelsForTheRow().

Answer 1

Looks to me like your problem is the "true" in your destroyRecursive() call which is instructing dojo to preserve the DOM. So you're destroying the widgets which has solved your duplicate id problem but the generated DOM is preserved; then when you call getTabPanelsForTheRow() it is generating 3 new panels over the existing ones.

What you want to do is, after calling destroyRecursive(), empty the container "tabPanel": domConstruct.empty("tabPanel") before calling getTabPanelsForTheRow().

On a side note, you're destroying and re-instantiating your panel widget everytime you click on a row, why not store a reference to your contentPanes within your TabContainer and then write a method which destroys the contentPanes only, empty the TabContainer node and then create the new panes...