Dojo Nested Widgets - Cannot use dom.byId or query

Question

I have two custom widgets created with dojo, widgetA and widgetB.

Loading widgetB from within widgetA (widgetA contains widgetB), then dom.byID("id") or query("#id") returns nothing on the child widget.

Same happens when loading widgetB from widget A. Note, that when instantiating each widget separately (not nested), both functions work as expected.

Is this a dojo problem?

in postCreate:

  var button = domConstruct.create("button", { innerHTML: "my button", id: "btnSelect" }, "placeholder");

when nesting the widgets it cannot find the "placeholder" element.

The html

<div id="placeholder"></div>

Answer 1

I don't think it's a good practice to use ID's in widgets and that you can directly access DOM nodes from widgetA to widgetB without providing a decend API in widgetB.

Your ID's should be removed (what are you going to do if you use the widget twice on a page?) and use attach points in stead.

if you define the following HTML in your first widget:

<div data-dojo-attach-point="placeholderNode"></div>

Then you can access your DOM node from the same widget using this.placeholderNode. You could also access it from the other widget by referencing to it using myOtherWidget.placeholderNode.

But like @xyu said, please provide a full example of how you're creating widgetB from widgetA.

Answer 2

The reason you can't find the placeholder div is because it has not been added to the dom during the postCreate function. If you try to create the button during the startup function it should work because at that point the widget's html has been added to the dom.

However, I would not recommend doing this. Use attachPoints instead of ID's, as Dimitri suggested.