Before I implemented a small web interface using dojo 1.5 and with just referencing the paths to the local folders (dojo,dijit,dojox) and using dojo.require to load the modules I wanted, it worked perfectly. Now I upgraded to 1.7 and all of a sudden it does not work even when usin g the url reference. I am referencing one of the demo projects
http://download.dojotoolkit.org/release-1.7.1/dojo-release-1.7.1/dijit/themes/themeTester.html
and was hoping to recreate the page with a few changes. I broke it down to the most simplest form by only having the main menu and it does not appear that way but just as mere text terms below each other.
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Theme Previewer</title>
<script type="text/javascript" dojoConfig="parseOnLoad:false,
async:true"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" > </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/document.css"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="Styles/demo.css"/>
<script type="text/javascript">
var dojoConfig = {
baseUrl: "//ajax.googleapis.com/ajax/libs",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
{ name: "dijit", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" },
{ name: "dojox", location: "//ajax.googleapis.com/ajax/libs/dojo/1.7.1/" }
]
};
</script>
<!--script type="text/javascript" src="Scripts/src.js"></script-->
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:=false">
<div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top'">
<div data-dojo-type="dijit.PopupMenuBarItem" id="edit">
<span>Edit</span>
<div data-dojo-type="dijit.Menu" id="editMenu">
<div data-dojo-type="dijit.MenuItem" id="cut" data-dojo-props="
iconClass:'dijitIconCut'
">Cut</div>
<div data-dojo-type="dijit.MenuItem" id="copy" data-dojo-props="
iconClass:'dijitIconCopy'
">Copy</div>
<div data-dojo-type="dijit.MenuItem" id="paste" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div>
<div data-dojo-type="dijit.MenuSeparator" id="separator"></div>
<div data-dojo-type="dijit.MenuItem" id="undo" data-dojo-props="iconClass:'dijitIconUndo'">Undo</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="view">
<span>View</span>
<div data-dojo-type="dijit.Menu" id="viewMenu">
<div data-dojo-type="dijit.MenuItem">Normal</div>
<div data-dojo-type="dijit.MenuItem">Outline</div>
<div data-dojo-type="dijit.PopupMenuItem">
<span>Zoom</span>
<div data-dojo-type="dijit.Menu" id="zoomMenu">
<div data-dojo-type="dijit.MenuItem">50%</div>
<div data-dojo-type="dijit.MenuItem">75%</div>
<div data-dojo-type="dijit.MenuItem">100%</div>
<div data-dojo-type="dijit.MenuItem">150%</div>
<div data-dojo-type="dijit.MenuItem">200%</div>
</div>
</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="themes">
<span>Themes</span>
<div data-dojo-type="dijit.Menu" id="themeMenu"></div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="dialogs">
<span>Dialogs</span>
<div data-dojo-type="dijit.Menu" id="dialogMenu">
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
<div data-dojo-type="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="inputPadding">
<span>TextBox Padding</span>
<div data-dojo-type="dijit.Menu" id="inputPaddingMenu">
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div>
<div data-dojo-type="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" id="help">
<span>Help</span>
<div data-dojo-type="dijit.Menu" id="helpMenu">
<div data-dojo-type="dijit.MenuItem">Help Topics</div>
<div data-dojo-type="dijit.MenuItem">About Dijit</div>
</div>
</div>
<div data-dojo-type="dijit.PopupMenuBarItem" data-dojo-props="disabled:true">
<span>Disabled</span>
<div data-dojo-type="dijit.Menu">
<div data-dojo-type="dijit.MenuItem">You should not see this</div>
</div>
</div>
</div>
</div>
I have a separate file that references the items to include:
define([
"dojo/_base/array",
"dojo_base/config",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/_base/kernel",
"dojo/query",
"dojo/ready",
"dojo/_base/window",
"dojo/_base/fx",
"dijit/registry",
"dijit/MenuItem",
"dojo/date/locale",
"dojo/parser",
"dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel",
"dojo/number", //// dojo/number/format
"dojo/dnd/Source",// // dojo/dnd/Source
"dojo/_base/json", //// dojo/toJson
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dojo/parser",
"dijit/form/DateTextBox",
"dojox/widget/AnalogGauge",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/BorderContainer",
"dijit/layout/AccordionContainer",
"dijit/form/Button",
"dojox/widget/AnalogGauge",
"dojox/widget/gauge/AnalogArcIndicator",
"dojox/widget/gauge/AnalogNeedleIndicator",
"dojox/widget/gauge/AnalogArrowIndicator",
"dijit/MenuBar",
"dijit/PopupMenuBarItem",
"dijit/Menu",
"dijit/MenuItem",
"dijit/Tree",
"dijit/MenuSeparator",
"dijit/Calendar",
"dijit/ColorPalette",
"dijit/dijit-all" // dijit.*
["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
}]);
hope this clarifies it a bit.
The HTML you’ve pasted specifies ‘parseOnLoad: false’ when it pulls Dojo in. That’ll prevent Dojo from actually parsing any of your data-dojo-type unless you explicitly call parser.parse(). If you change it to ‘parseOnLoad: true’, does that help? (That’s no longer the recommended way to do it, but it would still be useful to try.)
You also seem to have a mixture of Dojo 1.7.2 and 1.7.1 references in the HTML, which is a little odd. Do you need that dojoConfig at all? Dojo ought to be able to find dijit + dojox as siblings of the dojo directory even on the CDN.
But it would definitely help to know what “does not work” actually means: do you get errors, no content appearing?
Later additions to answer:
Add this in your HTML. It’ll load the right modules and kick the parser off manually.
That’ll get your menu items displaying, although it won’t work completely until you add your onClick handler functions.
Finally, make sure you look in your browser console for errors and warnings: that’ll provide lots of output that’ll help people diagnose future problems. And if you do get problems loading modules, try switching async off because async can sometimes make diagnostics harder.