Destroying widgets in Dijit

Question

What's the correct way to destroy widgets inside TabContainer in Dojo/Dijit?

For each tab I'm loading new BorderContainer that includes basically a widget that includes any small widgets. But now that I'm trying to get it to work with tab control so that it destroys the previous page before loading a new one, I'm stuck. Right now I use a global variable to store active widget name and when user clicks a new tab, it fetches active widget's id from global variable and destroys it and then proceeds into loading the new active widget. This works but when I have destroyed the widget once, I can't get it to appear again. I get this error:

Uncaught Error: Tried to register widget with id==widget_foo_container but that id is already registered".

I'm using widget_XXX_container id for all the widgets so XXX is replaced by id of the widget.

I'm currently using dijit.byId('widget_foo_container').destroy() but it doesn't seem to do the job. I have also tried destroyDecendant() and destroyRecursive() but they don't produce wanted effect also. It seems that I might be missing a piece that actually finishes destroying the widget instead of just removing it from DOM.

I actually got this to work. What I needed to do was to getChildren() from BorderContainer and then with forEach() destroyRecursive() & destroy()... pheew, that was frustrating 3 hours... — jimm
destroyRecursive should be enough - it calls destroyDescendants and destroy itself. For that matter, I'm curious why simply calling destroyRecursive on the BorderContainer itself didn't suffice in your case... — Ken Franqueiro

Philippe Philippe · Accepted Answer · 2011-11-10T12:09:03

Have a look at dijit.registry to see if your widgets are still registered...

Example :

<div id="wrapper">
        <div id="btn1" data-dojo-type="dijit.form.Button">Button1</div>
        <div id="btn2" data-dojo-type="dijit.form.Button">Destroy button 1
            <script type="dojo/method" data-dojo-event="onClick">
                dijit.byId("btn1") && dijit.byId("btn1").destroyRecursive();
                console.debug(dijit.registry._hash);
            </script>
        </div>
        <div id="btn3" data-dojo-type="dijit.form.Button">Recreate button 1
            <script type="dojo/method" data-dojo-event="onClick">
                dojo.place(new dijit.form.Button({ label: "Button1", id:"btn1"}).domNode, "wrapper", "first");
                console.debug(dijit.registry._hash);
            </script>
        </div>
</div>

Destroying widgets in Dijit

1 Answers