Dojo example in documentation fails with "id is already registered" error

Question

I'm unable to get a dojo example listed under dojo's official documentation to work. When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:

Error: Tried to register widget with id==borderContainerThree but that id is already registered

This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work. I've copied their code verbatim from the web page.

The example is given on the page: http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html and is titled: "BorderContainer Inside A Dijit Template"

A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line, the error disappears, but there is no content displayed on the web page.

My code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>dijit/layout/BorderContainer &mdash; The Dojo Toolkit - Reference Guide</title>

    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
    <link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
    <script type="text/javascript">
        dojoConfig = {
            async: true
        };
    </script>
    <script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
    <script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>

</head>
<body class="claro" >
My Test


<script type="text/javascript">
    require([
        "dojo/parser",
        "dojo/_base/declare",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        "dijit/_WidgetsInTemplateMixin",
        "dijit/form/Button",
        "dijit/layout/ContentPane",
        "dijit/layout/BorderContainer",
        "dijit/layout/TabContainer",
        "dijit/layout/AccordionContainer",
        "dijit/layout/AccordionPane"
    ], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
        declare("MyDijit",
                [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
                    // Note: string would come from dojo/text! plugin in a 'proper' dijit
                    templateString: '<div style="width: 100%; height: 100%;">' +
                            '<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
                            '  style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
                            '<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
                            '<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
                            ' <div data-dojo-type="dijit/form/Button">A Button</div>' +
                            '</div>' +
                            '</div></div>'
                });

        parser.parse();
    });
</script>

<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
            <script type="dojo/on" data-dojo-event="click">
                require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
                    // Create a new instance
                    var newdijit = new MyDijit({}, domConstruct.create('div'));
                    newdijit.placeAt(dom.byId('mydijitDestination'));
                    newdijit.startup();
                });
            </script>
        </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
        OUTER LEFT<br />
        This is my content.<br />
        There is much like it,<br />
        but this is mine.<br />
        My content is my best friend.<br />
        It is my life.<br />
        I must master it,<br />
        as I must master my life.
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
        <div id="mydijitDestination" style="width: 100%; height: 100%"></div>
    </div>
</div>


</body>
</html>

Any suggestions given as to what I'm doing wrong would be greatly appreciated.

g00glen00b g00glen00b · Accepted Answer · 2014-07-20T17:34:38

The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.

I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:

<script type="text/javascript">
    dojoConfig = {
        async: true,
        parseOnLoad: true
    };
</script>

The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:

#borderContainerThree {
    width: 100%;
    height: 100%;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow:hidden;
}

If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/

Dojo example in documentation fails with "id is already registered" error

1 Answers