I'm having trouble placing a Dojo widget in the page

▲
0
▼

I've got a simple widget:

define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom-construct"],
function(declare, WidgetBase, domConstruct){

    return declare("gijit.workflow.debug.combi", [WidgetBase], {
        startup: function(){
            alert("started");
        },
        buildRendering: function(){

            var container = domConstruct.create("div", {innerHTML:"test"}, this.domNode, "first");
            var rad1 = domConstruct.create("input", {type:"radio"}, container, "first");
            var rad1 = domConstruct.create("input", {type:"radio"}, container, "last");
        }
    });
});

and a simple loading page:

<!DOCTYPE html>
<html >
<head>

<link rel="stylesheet" href="../../../css/tcs-style-dijit.css" />

<script>dojoConfig = {parseOnLoad: false}</script>
<script src="../../../js/dojo/dojo.js" data-dojo-config="async: true"></script>
<!-- <script src="../../../js/gijit/workflow/debug/combi.js"></script> -->
<script>
require(["dojo/dom", "gijit/workflow/debug/combi", "dojo/parser",
        "dojo/_base/window"], function(dom, combi, parser, window) {
    var widget = new combi();
    widget.placeAt(window.body());
//  widget.startup();
});
</script>
</head>
<body id="dd" class="tcs">
</body>
</html>

However, I get the following error:

Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLBodyElement.appendChild] domain">http://domain: port/js/dojo/dojo.js Line 15

I have isolated the error to the point where I try to place the widget in the HTML:

widget.placeAt(window.body());

I am unable to figure out what is causing the issue, and would appreciate some help

javascript
dojo
widget
asked on Stack Overflow Jan 12, 2013 by AdamSpurgin

1 Answer

▲
1
▼

At the moment you invoke window.body() the DOM has not been parsed yet and it therefore returns undefined. Require dojo/domReady! plugin as the last module loading:

require([
    "dojo/dom",
    "gijit/workflow/debug/combi",
    "dojo/parser",
    "dojo/_base/window",
    "dojo/domReady!"  // ==> wait for the DOM to be ready
], function(dom, combi, parser, win) {
    var widget = new combi();
    widget.placeAt(win.body());
    widget.startup();
});

Please note, that as a best practice I would recommend not to hide window object by assigning dojo/_base/window module into a local window variable, use win instead.

answered on Stack Overflow Jan 13, 2013 by phusick

User contributions licensed under CC BY-SA 3.0