Question

I have the following code which i try to parse manually because I have created a preloader following this example (http://acuriousanimal.com/blog/2010/12/05/how-to-create-a-preloader-in-dojo/):

<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design: 'headline', style: 'width: 100%; height:100%'">
        <div id="contentTabs" class="centerPanel" data-dojo-type="dijit.layout.TabContainer"
             data-dojo-props="region: 'center', tabPosition: 'top', style: 'width: 100%; height:100%'">
            <div data-dojo-type="dijit.layout.BorderContainer" id="inbox" title="Inbox" data-dojo-props="design: 'headline', style: 'width: 100%, height:100%'">
                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: true"
                    style="width: 50%; height:100%;">
                    <div id="grid">
                    </div>
                </div>

                <div id="emailcontainer" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer"
                    data-dojo-props="design: 'headline', region: 'center', style: 'width: 100%; height:100%'">
                    <div id="emailUserAccounts" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top', style: 'width: 50%; height:14px'">
                        User Reports
                    </div>
                    <div id="emailbody" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', style: 'width: 50%;'">
                        Select an E-Mail from the Inbox
                    </div>
                </div>

            </div>
        </div>

        <div id="toolbar" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'"
            style="text-align: right;">

                <input id="searchtext" type='text' size='50' style="height: 30px;" />

                <button id="searchbtn" type="button" style="width: 120px">
                    Search</button> 
                        <button id="invertbtn" type="submit" style="width: 120px">
                            Invert Status</button>
            <div id="supportstaffselect">
            </div>

                <button id="assignbtn" type="button" style="width: 120px">
                    Assign</button>
            <select id="priorityselect" data-dojo-type="dijit.form.Select" name="priorityselect">
                <option value="0">Low</option>
                <option value="1" selected="selected">Normal</option>
                <option value="2">Medium</option>
                <option value="3">High</option>
                <option value="4">+1</option>
            </select>

                <button id="prioritybtn" type="button" style="width: 120px">
                    Change Priority</button> 
                        <button id="newMessage" type="button" style="width: 120px">
                            New Message</button> 
                                <button id="replybtn" type="button" style="width: 120px">
                                    Reply</button> 
                                        <button id="replyallbtn" type="button" style="width: 120px">
                                            Reply All</button> 
                                                <button id="forwardbtn" type="button" style="width: 120px">
                                                    Forward</button>
        </div>
        <div id="filtersnavigation" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'" style="width: 130px;">
            <ul class="filterlist">
                <li class="filterlistitem" id="everythingfilter">Everything</li>
                <li class="filterlistitem" id="openfilterid">Open</li>
                <li class="filterlistitem" id="closedfilterid">Closed</li>
                <li class="filterlistitem" id="unrepliedfilterid">Unreplied</li>
                <li class="filterlistitem" id="repliedfilterid">Replied</li>
                <li class="filterlistitem" id="minefilterid">Mine</li>
                <li class="filterlistitem" id="mineunrepliedfilterid">Mine
                    Unreplied</li>
            </ul>         
        </div>               
    </div>

This code parses and loads correctly with no problem or error in Firefox and Chrome BUT parser.js throws arbirtrary errors in IE9 when trying to parse BorderContainer or TabContainer by calling inside a script parser.parse() e.g.

Console Log: “Could not load class dijit.layout.BorderContainer”

The error the IE9 points at is at line 132 of parser.js (dojo-release-1.7.2-src):

darray.forEach(nodes, function(obj){
                        if(!obj){ return; }

                        var node = obj.node || obj,
                                type = dojoType in mixin ? mixin[dojoType] : obj.node ? obj.type : (node.getAttribute(dataDojoType) || node.getAttribute(dojoType)),
                                ctor = _ctorMap[type] || (_ctorMap[type] = dlang.getObject(type)),
                                proto = ctor && ctor.prototype;
                        if(!ctor){
        Line 132  ---> throw new Error("Could not load class '" + type);
                        }

Does anyone have an idea about what I am doing wrong if you take into consideration that the above code works perfectly even in IE9 when I have the parseOnLoad: true ?

Thanks

Answer 1

With 99% certainty, the error is due to that dlang.getObject(type) returns a null pointer. My guess is that the AMD loader (which probably is set to async:true) – has not yet completed the download and declaration of the module mentioned in the error. To overcome this you must adapt to the AMD pattern which pulls in requirements – and runs once theyre ready (each required module that is). Try wrapping your parser.parse() as follows:

<script src="path_to_dj/dojo/dojo.js"></script>
<!-- dojo must be loaded first - obviously -->
<script type="text/javascript">

  require(
    {/*using defaults*/},         /* local conf */ 
    [                             /* every single requirement, mapped to cb params below */
      "dijit/layout/BorderContainer",
      "dijit/layout/TabContainer"
      // optionally uncomment below line to have callback wait domReady event
      //, "dojo/domReady!"
    ],
    function(dep1, dep2, dep3) {  /* callback for XHR.readyState=4/SCRIPT.onload */

          parser.parse(dojo.body());

    }
  );

</script>