Question

i use dojo tab container and content pane to set up a search dialogue in all pages of my app. But it gives out an error “Tried to register widget with id==globsearchpkg but that id is already registered” in those pages which have a dojo date text box along with the tab container. I use Zend_Dojo_Form_Element_DateTextBox for creating the date text box. I use the following code for my tabcontainer:

<div id="globalsearchdialogue" dojoType="dijit.Dialog" title="Global Search" style="display:none" >
<div dojoType="dijit.layout.TabContainer" style="width: 500px; height: 200px;" id="globsearchtabs">


    <div dojoType="dijit.layout.ContentPane" title="Search Packages" id="globsearchpkg"> 
      //First form here
    </div>

    <div dojoType="dijit.layout.ContentPane" title="Search Books" id="globsearchbook"> 
     //Second form here
    </div>
</div>

When i remove the date text box from the pages where the error comes up, it works fine. And if i remove the two dijit.layout.ContentPanes, it work fine. Also even with this error the tab containers and date text box works fine. The problem is that other components like context menu wont work properly once this error comes up. Any ideas?

Answer 1

That means you’re adding a widget more than once, or adding a widget once, removing it in the DOM only and then trying to re-add it.

If you genuinely want the widget more than once on the page, you have to have different IDs for each instance (an ID is unique)

If you only want a single instance on your page at once, do you remove the search dialog from the page and then try and reinclude it later?

If so, you’re probably removing it by calling parentNode.innerHTML = ''; or using dojo.empty(parentNode) or similar? Instead you should be calling dijit.byId('globalsearchdialogue').destroyRecursive().

That call will both destroy the DOM nodes associated with the widget, and clean up the JS code as well. Remember, dijits are combinations of both HTML and Javascript code, so you have to clean up both parts properly!