lorenmueller

renaming dojo namespace breaks dojo markup dijits?

Discussion created by lorenmueller on Aug 17, 2010
Latest reply on Aug 17, 2010 by lorenmueller
Hi,
I have an app that primarily uses programmatic custom dijit creation in conjunction with esri's jsapi (2.0).  I thought the flexibility of changing the dojo namespace as described here looked nifty, but after some testing I have found that I can no longer create dijits in markup. Yikes! (or, what the heck am I doing wrong here )
In one page for testing start by adding the scopeMap item to djConfig, then reference the api, then reference some dijits like esriDojo.require("dijit.form.DropDownButton");, and then in the body try to create the dijit, but it will not work.  When I remove the namespace customizations the DropDownButton works just fine. Does renaming the dojo namespace somehow break the in-line parsing on-load? 

Take out the scopeMap and change the require statements back to regular dojo.require and the DDBtn works fine.

TEST PAGE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>testing dojo Scope</title> 

    <!-- styling -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"/>
                                
    <!-- Set dojo configuration -->
    <script type="text/javascript">
        djConfig = {
            parseOnLoad: true,
            scopeMap: [
                ["dojo", "esriDojo"],
                ["dijit", "esriDijit"],
                ["dojox", "esriDojox"]
            ]
        };
    </script>
   
    <!-- v2.0 uses Dojo v1.4.2 -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
   
    <script type="text/javascript">
            esriDojo.require("dijit.form.DropDownButton");
            esriDojo.require("dijit.Menu");
    </script>
   
</head>
<body class="tundra">
   
    <button dojoType="dijit.form.DropDownButton">
    <span>Test DDBtn</span>
    <div dojoType="dijit.Menu">
        <div dojoType="dijit.MenuItem" label="Some menu item 1">
            <script type="dojo/method" event="onClick" args="evt">
                console.log("ok");
                alert("ok");
            </script>
        </div>
        <div dojoType="dijit.MenuItem" label="Some menu item 2">
            <script type="dojo/method" event="onClick" args="evt">
                console.log("ok");
                alert("ok");
            </script>
        </div>                  
    </div>
    </button>

</body>
</html>

Thanks,
Loren

Outcomes