I plan to use a wizard together with ArcGIS JavaScript. But I can't get the dojox.widget.Wizard to work togehter with ArcGIS JavaScript API.
I striped done the code to the a minimum and everything works when I use src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js. But when I change to src="https://js.arcgis.com/4.1/" it doesn't work any more. Any sugestions?
<!DOCTYPE html>
<html>
<head>
<title>Wizard Test</title>
<link rel="stylesheet" id="themeStyles" href="https://js.arcgis.com/4.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs//dojo/1.10.4/dojox/widget/Wizard/Wizard.css">
<script src="https://js.arcgis.com/4.1/" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<!--<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>-->
<script type="text/javascript">
require([
"dojox/widget/Wizard",
"dojox/widget/WizardPane",
"dojo/domReady!"
], function() {
});
</script>
</head>
<body class="claro">
<div id="wizard1" data-dojo-type="dojox.widget.Wizard" data-dojo-props=" style:'width:400px; height:200px'">
<div data-dojo-type="dojox.widget.WizardPane">
<h1>Tab 1</h1>
</div>
<div data-dojo-type="dojox.widget.WizardPane">
<h1>Tab 2</h1>
</div>
</div>
</body>
Solved! Go to Solution.
I'm not familiar with how this dijit should work, but here's a slightly modified version of your code that seems to work.
<!DOCTYPE html>
<html>
<head>
<title>Wizard Test</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.1/dojox/widget/Wizard/Wizard.css">
<style>
#wizard1 {
color : white;
background-color : dodgerblue;
width : 500px;
height : 300px;
}
</style>
<script type="text/javascript">
var dojoConfig = { parseOnLoad: true };
</script>
<script src="https://js.arcgis.com/4.1/"></script>
<script type="text/javascript">
require([
"dojox/widget/Wizard",
"dojox/widget/WizardPane",
"dojo/domReady!"
], function () {
});
</script>
</head>
<body class="claro">
<div id="wizard1" data-dojo-type="dojox/widget/Wizard" data-dojo-props="nextButtonLabel:'Go to next pane...'">
<div data-dojo-type="dojox/widget/WizardPane">
<h1>Tab 1</h1>
</div>
<div data-dojo-type="dojox/widget/WizardPane">
<h1>Tab 2</h1>
</div>
</div>
</body>
</html>
I'm not familiar with how this dijit should work, but here's a slightly modified version of your code that seems to work.
<!DOCTYPE html>
<html>
<head>
<title>Wizard Test</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.1/dojox/widget/Wizard/Wizard.css">
<style>
#wizard1 {
color : white;
background-color : dodgerblue;
width : 500px;
height : 300px;
}
</style>
<script type="text/javascript">
var dojoConfig = { parseOnLoad: true };
</script>
<script src="https://js.arcgis.com/4.1/"></script>
<script type="text/javascript">
require([
"dojox/widget/Wizard",
"dojox/widget/WizardPane",
"dojo/domReady!"
], function () {
});
</script>
</head>
<body class="claro">
<div id="wizard1" data-dojo-type="dojox/widget/Wizard" data-dojo-props="nextButtonLabel:'Go to next pane...'">
<div data-dojo-type="dojox/widget/WizardPane">
<h1>Tab 1</h1>
</div>
<div data-dojo-type="dojox/widget/WizardPane">
<h1>Tab 2</h1>
</div>
</div>
</body>
</html>
Thanks John. Really appreciated!