dojo automatically creates views with iconcontainers

Question

I have a problem with Dojo. When Dojo initializes, Dojo automatically creates 2 mobileViews with mobile iconContainers in them. He creates them next to my page. Because of this, it blocks my views I wrote. I can't click on buttons on my view.

The strange thing about this, is that it only happens sometimes! when I refresh 4-5 times, it all goes well. But when I refresh again then sometimes is happens again.

I don't know why Dojo creates them.

In my js code I make a accordion container with the command

    var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");

This makes a accordion container in this div

    <div id="schoolContainer"></div>

In this container I add a iconMenu with the next commands

    accordion.addChild(pane);

and iconContainer.placeAt(pane.containerNode); iconContainer.startup();

and accordion.addChild(pane);

I don't get why Dojo creates new views with iconContainers next to my main page.

These are the view that are created

    <div class="mblView" id="dojox_mobile_IconContainer_0_mblApplView" widgetid="dojox_mobile_IconContainer_0_mblApplView" style="visibility: visible;"><h1 class="mblHeading mblHeadingCenterTitle" id="dojox_mobile_Heading_0" widgetid="dojox_mobile_Heading_0" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_0" dir="ltr" widgetid="dojox_mobile_ToolBarButton_0"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_0" widgetid="dojox_mobile_Container_0"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_0" widgetid="dojox_mobile__IconItemPane_0" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_1" widgetid="dojox_mobile__IconItemPane_1" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1B</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_2" widgetid="dojox_mobile__IconItemPane_2" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1C</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_3" widgetid="dojox_mobile__IconItemPane_3" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>

    <div class="mblView" id="dojox_mobile_IconContainer_1_mblApplView" widgetid="dojox_mobile_IconContainer_1_mblApplView" style="visibility: visible; display: none;"><h1 class="mblHeading" id="dojox_mobile_Heading_1" widgetid="dojox_mobile_Heading_1" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_1" dir="ltr" widgetid="dojox_mobile_ToolBarButton_1"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_1" widgetid="dojox_mobile_Container_1"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_4" widgetid="dojox_mobile__IconItemPane_4" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_5" widgetid="dojox_mobile__IconItemPane_5" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2b</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_6" widgetid="dojox_mobile__IconItemPane_6" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2c</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_7" widgetid="dojox_mobile__IconItemPane_7" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>

I found out that the problem is made by the next code, but I don't know why.

    /*KLASSENOVERZICHT FUNCTIONALITY START*/
    function toonScholen(items){
WL.Logger.debug("Stap 6: toonScholen START");
//alert("Via adapter: "+JSON.stringify(items));
var json = getScholen();

for (var i = 0; i < json.length; i++) {
    //alert(json[i].naam);
}

require([
         "dojox/mobile/Accordion",
         "dojox/mobile/ContentPane",
         "dojox/mobile/RoundRectList",
         "dojox/mobile/ListItem",
         "dojox/mobile/parser",
         "dojox/mobile",
         "dojox/mobile/IconContainer"
     ], function(Accordion, ContentPane, RoundRectList, ListItem){
         var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");
         accordion.startup();

         var pane;

         var scholen = json.scholen;


         for (var i = 0; i < scholen.length; i++) {
             // ContentPane : Scholen
                pane = new ContentPane({

                class: "schoolContainer",
                label: scholen[i].naam,
                icon1:"images/ArrowDown.png", 
                icon2:"images/ArrowUp.png" , 
                iconPos1:"0,0,42,42", 
                iconPos2:"0,0,42,42"

             });
             accordion.addChild(pane);

             var iconContainer = new         dojox.mobile.IconContainer({transition:'scaleIn', iconBase:'images/Tile_Blue.png'});
             iconContainer.placeAt(pane.containerNode);
             iconContainer.startup();

           //IconMenu : Klassen
             var klassen = scholen[i].klassen;
             for (var j = 0; j < klassen.length; j++) {
                 var iconUrl;
                 if (j%3 == 1){
                     iconUrl= "images/Tile_Blue.png";
                 }
                 else if(j%3 == 2){
                     iconUrl= "images/Tile_Green.png";
                 }
                 else if(j%3 == 0){
                     iconUrl= "images/Tile_Red.png";
                 }

                 iconJs =new dojox.mobile.IconItem({label:klassen[j].naam, icon:iconUrl ,moveTo:'klasView', transition:'scaleIn', class:'klasIcon'});
                 iconContainer.addChild(iconJs);
             }
             //IconMenu : Klas toevoegen
             iconJs =new dojox.mobile.IconItem({label:'', deletable: false, icon:'images/Tile_Toevoegen.png',moveTo:'klasToevoegenView?schoolId='+scholen[i].id,transition:'slide', class:'klasIcon'});
             iconContainer.addChild(iconJs);

         }
      // ContentPane : School toevoegen
         pane = new ContentPane({

                class: "schoolContainer",
                label:"School toevoegen",
                icon1:"images/Plus.png",
                icon2:"images/Plus.png",
                iconPos1:"0,0,42,42",
                iconPos2:"0,0,42,42"

             });
             accordion.addChild(pane);

     });
WL.Logger.debug("Stap 6: toonScholen END");
    }
    /*KLASSENOVERZICHT FUNCTIONALITY END*/

Answer 1

I tried using "dojo/domReady!" before creating new widgets dynamically.