Can't get dojox.widget.Wizard to work

DanielNilede · ‎11-10-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JohnGrayson · ‎11-10-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

JohnGrayson · ‎11-10-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DanielNilede · ‎11-10-2016

Thanks John. Really appreciated!