Problem loading custom dijit

DavidChrest · ‎02-03-2016

Hello, I am having a serious problem trying to figure out how to load (dojoConfig) a custom dijit. There seems to be very little straightforward documentation on this. I am using Nicolas Haney's wonderful Select by Attributes Dijit found here: developer-support/web-js/select-by-attribute-widget at master · Esri/developer-support · GitHub

I copied code to my PC and all works well.

He loads the widget from a Dropbox URL like this:

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "https://dl.dropboxusercontent.com/u/79881075/SelectByAtt/"
            }]

In the README.md, he says, "Configure the dojo loader to pull from the widget's location:"

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "<path to the widget>"

I have AttributeSelection.js in my /js file. I have tried many things but cannot get it to load the widget from my own directory instead of his dropbox URL.

This also does not work:

dojoConfig = {
    packages: [
    {
                 name: 'application',
                 location: location.pathname.replace(/\/[^\/]*$/, '') + '/js'
             }
    ]
    };

Can somebody please help me with this tricky syntax to load the widget from my own folder.

Thank you so much for any help,

David

RobertScheitlin__GISP · ‎02-03-2016

David,

Here is the your project working on my end.

View solution in original post

RobertScheitlin__GISP · ‎02-03-2016

David,

What does your require look like for this new component? It should look like:

require(['application/AttributeSelection'

DavidChrest · ‎02-03-2016

OK, I did change my require to require(['application/AttributeSelection' but both these scenarios below resulted in error. Very tricky syntax that just will not work for me. Am I missing something?

My set up is this:

SelectByAttributeWidget_test: main folder with index.html.

SelectByAttributeWidget_test\css: contains AttributeSelection.css

SelectByAttributeWidget_test\html: contains AttributeSelection.html

SelectByAttributeWidget_test\js: AttributeSelection.js

This does not work:

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  var dojoConfig = {
  packages: [{
  name: "application",
  location: "js"
            }]
  };

And this does not work:

 var dojoConfig = {
  packages: [{
  name: "application",
  //location: location.pathname.replace(/\/[^\/]*$/, '') + '/js'
  location: "js"
            }]
  };

RobertScheitlin__GISP · ‎02-03-2016

David,

Let me give you an example of one that I have working for you to compare:

<script>
        var dojoConfig = {
            parseOnLoad: false,
            async: true,
            tlmSiblingOfDojo: false,
            packages: [{
                name: "ncam",
                location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"
            }]
        };
    </script>

Here is the directory structure:

and this is the require:

"ncam/FlareClusterLayer",

NOTICE no slash in front of "ncam".

DavidChrest · ‎02-03-2016

OK, I am using your exact code. Here is my file structure.

AttributeSelection.js is located in ncam.

My require: "ncam/AttributeSelection"

The error I get:

What is it that is possibly going wrong?

RobertScheitlin__GISP · ‎02-03-2016

David,

I would need to see your whole index.html.

DavidChrest · ‎02-03-2016

<!DOCTYPE HTML>
<html>


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


  <title>Sel by Attribute Dijit</title>


  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="css/AttributeSelection.css">
  <style type="text/css">
  html,
  body,
  #map {
  height: 100%;
  width: 100%;
  }

  #attributeSelection {
  width: 350px;
  visibility: hidden;
  top: 50px;
  left: 200px;
  position: absolute;
  z-index: 100;
  background-color: #00E6E6;
  }

  #toggleSelect {
  top: 100px;
  left: 100px;
  position: absolute;
  z-index: 10;
  }

  .container {
  position: relative;
  padding: 10px;
  border: 1px solid #eee;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 100%;
  }
  </style>
</head>


<body class="claro">
  <div class="container">
  <div id="map" class="map"></div>
  <div id="attributeSelection"></div>
  <button id="toggleSelect">Show Widget</button>
  </div>
  <script type="text/javascript">
  //var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
  /*var dojoConfig = {
  packages: [{
  name: "application",
  location: "https://dl.dropboxusercontent.com/u/79881075/SelectByAtt/"
            }]
  };*/




  var dojoConfig = {
  parseOnLoad: false,
  async: true,
  tlmSiblingOfDojo: false,
  packages: [{
  name: "ncam",
  location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"
            }]
  };
  </script>
  <script src="https://js.arcgis.com/3.15/" type="text/javascript"></script>


  <script type="text/javascript">
  var map
  require([
  "esri/map",
  "ncam/AttributeSelection",
  "esri/layers/FeatureLayer",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/Color",
  "dojo/on"
  ], function (Map, SelectByAtt, FeatureLayer, SimpleFillSymbol, SimpleMarkerSymbol, Color, on) {
  var myWidget;
  map = new Map("map", {
  center: [-86, 33],
  zoom: 6,
  spatialReference: 102100,
  showAttribution: false,
  logo: false,
  sliderStyle: "small",
  basemap: "topo"
  });


  var layer1 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3");
  var layer2 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2");




  var jailsPoints = new FeatureLayer("http://sushi:6080/arcgis/rest/services/DavidC/JailsLink_Points_Jails/MapServer/0", {
  id: "jailsFL",
  mode: FeatureLayer.MODE_ONDEMAND,
  });




  var selectionSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5]));


  var symbolSelectedJails = new SimpleMarkerSymbol({
  "type": "esriSMS",
  "style": "esriSMSCircle",
  "color": [255, 115, 0],
  "size": 9,
  "outline": {
  "color": [255, 0, 0, 214],
  "width": 1
  }
  });


  layer1.setSelectionSymbol(selectionSymbol);
  layer2.setSelectionSymbol(selectionSymbol);
  jailsPoints.setSelectionSymbol(symbolSelectedJails);


  map.addLayers([layer1, layer2]);
  map.addLayer(jailsPoints);


  document.getElementById("toggleSelect").addEventListener("click", showSelect);


  //After the layers have been added to the map, create the SelectByAtt widget
  map.on("layers-add-result", function () {
  myWidget = new SelectByAtt({
  map: map,
  layers: [layer1, layer2, jailsPoints]
  }, "attributeSelection");
  myWidget.startup();
  });


  function showSelect() {
  myWidget.show();
  }


  });
  </script>
</body>


</html>

RobertScheitlin__GISP · ‎02-03-2016

David,

David are you doing a Ctrl F5 refresh of the web page when you test? Using Ctrl F5 forces the browser to ignore any caching of the page and it get the new change.

DavidChrest · ‎02-03-2016

Yes, but still not working.

My widget is here: C:\Projects\Jails\Linking_Plan\Webedits\SelectByAttributeWidget_test\ncam\AttributeSelection.js.

My index.html is here: C:\Projects\Jails\Linking_Plan\Webedits\SelectByAttributeWidget_test\index.html

So what exactly should this be?

packages: [{

name: "ncam",

location: location.pathname.replace(/\/[^/]+$/, '') + "ncam"

And what exactly should this be:

require: "ncam/AttributeSelection"

RobertScheitlin__GISP · ‎02-03-2016

David,

Try the attached zip with your project on my last thread. I worked for me on my end.