nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem loading custom dijit

DavidChrest

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

Vind meer berichten getagd met

Accepted answers

rscheitlin

David,

Here is the your project working on my end.

David_Chrest.zip

All comments

DavidChrest

Yep, that does it! Thanks so very much! You patience and responses are greatly appreciated.

Looks like that AttributeSelection.html file needed to also be in the js folder along with AttributeSelection.js.

rscheitlin

David,

Here is the your project working on my end.

David_Chrest.zip

DavidChrest

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?

rscheitlin

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

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"
            }]
  };

rscheitlin

David,

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

require(['application/AttributeSelection'

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.