Question

I am developing a mobile application with the Dojo Toolkit. I have the following widget:

define("js/custom/CustomHeading", [ "dojo/_base/declare", "dojo/dom-construct",
    "dojo/dom-class", "dojox/mobile/Heading", "dojox/mobile/ToolBarButton",
    "dojo/ready" ], function(declare, domConstruct, domClass, Heading,
    ToolBarButton, ready) {

return declare("js.custom.CustomHeading", [ Heading ], {

    buildRendering : function() {
        this.inherited(arguments);

        navigationButton = new dojox.mobile.ToolBarButton({
            icon : "js/custom/images/navigation.png"
        });

        navigationButton.placeAt(this.domNode);

        ready(function() {
            console.log("I entered the block.");
        });

    }
});

});

If I try to find a widget that is in my html using dijit.byId(), I get no successful result. Dojo can not find the widget, whereas it is there. The widget I want to find looks as follows:

<div id="navigationOverlay" data-dojo-type="dojox.mobile.Overlay">
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem"
            data-dojo-props="moveTo:'dataServerRuntime',transition:'slide',label:'Health Summary'"
            onclick="hideNavigation();"></li>
    </ul>
</div>

What am I doing wrong? How can I find the widget?

Answer 1

Use dojo/ready:

ready(function() {
    var navigationWidget = reqistry.byId("navigationOverlay"); 
})

An example at jsFiddle: http://jsfiddle.net/phusick/tgU2x/