dijit.form.HorizontalRule is not a constructor - but only at 3.4

KevinGooss · ‎05-09-2013

I just started getting this error about the HorizontalRule dijit when i switched to v3.4
at 3.3 it works fine.
i'm using this to create transparency sliders

 var theSlider = new dijit.form.HorizontalSlider({
                value: 0,
                onChange: function (val) { _self._toc.setLayerTransparency(_self._name, val); },
                style: "width:165px;height: 20px;",
                minimum: 0,
                maximum: 100,
                discreteValues: 11,
                intermediateChanges: "true",
                showButtons: "true"
            }, sp);

did something change about the way i need to declare the dijit or anything like that?

ShreyasVakil · ‎05-09-2013

I don't know if I understand your question correctly, but here is my sample code in which I add a dijit.form.HorizontalSlider and it works fine with v3.4 of JS API.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <style>
      html, body{
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
    </style>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
      dojo.require("esri.map");
   dojo.require("dijit.form.HorizontalSlider");
    dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      function init() {
        var map = new esri.Map("map",{
          basemap:"topo",
          center:[-122.45,37.75], //long, lat
          zoom:13,
          sliderStyle:"small"
        });
  
   var slider = new dijit.form.HorizontalSlider({
        name: "slider",
        value: 5,
        minimum: -10,
        maximum: 10,
        intermediateChanges: true,
        style: "width:300px;",
        onChange: function(){
            alert("You are using HorizontalSlider");
        }
    }, "slider");

  
      }

      dojo.ready(init);
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
  <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:900px; height:750px;"></div>
 <div id="slider" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"  style="background-color: #EEEEEE;"></div>
</div>
  </body>
</html>

Please let me know if it works for you.

KevinGooss · ‎05-10-2013

it turned out that i needed the dojo.require statements for those two objects.
But before 3.4 i did not have those requires and it just worked.

ShreyasVakil · ‎05-10-2013

I am not sure how it worked in v3.3, for what I know you always need dojo.require for any class you use in your js.

Well, I'm glad it is working now.