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
Solved! Go to Solution.
David,
What does your require look like for this new component? It should look like:
require(['application/AttributeSelection'
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" }] };
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".
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?
David,
I would need to see your whole index.html.
<!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>
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.
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"
David,
Try the attached zip with your project on my last thread. I worked for me on my end.