I have encountered an issue with a function that adds a div as a child to a dijit/layout/contentpane. The problem arises when I attempt to reference this div using dom.byId after adding it to the content pane. The function is triggered by a click event on a menu item:
The menu item in question:
<div id="miLMWS" data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){SetPage('LMWS');}">Watershed</div>
The onClick function (SetPage):
....
function (dom, parser, registry, ready, WatershedMap, OWOWMapGallery) {
window.SetPage = function (pg) {
//set the page based on the clicked menu item
ClearWidget();//removes previous widget and deletes the div
AddToolDiv();//adds the div
switch (pg) {
case 'LMWS':
var test = dom.byId("tool"); //this returns undefined
//WS = new WatershedMap({}, "tool");
break;
}
};
...
The addDivFunction:
function AddToolDiv() {
//add page div
var tool = document.createElement("div");
tool.setAttribute("id", "tool");
var ContentContainer = registry.byId("MainContent");
ContentContainer.set("MainContent", tool);
var test = dom.byId("tool");//this returns undefined
}
Every time a menu item is clicked, a new custom widget is loaded into the tool div. There is a ClearWidget function that removes the old widget and the tool div. Could calling the function from the onClick event be causing this issue? When I call AddToolDiv on page load, the test variable references the tool div correctly. Any assistance would be greatly appreciated.
Thank you