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

Javascript dojox/form/CheckedMultiSelect

deleted-user-yA_w_FC9FKe5

I am creating a simple application where I am going to have a lot of different dropdown type boxes. I really like the dojox/form/CheckedMultiSelect. However, I am having an issue when trying to load the contents of it from a .js file. I've attached my test file and the js file. It seems to be working okay in IE but is not working in Safari or Chrome. I have no idea why? As you can see from my code the dojox/form/CheckedMultiSelect seems to work in Safari and Chrome. It only seems to be an issue when I am trying to populate it via the .js code.

Any help would be very much appreciated as this is very frustrating and I have been working on this for a few days now.

Thanks,

Michael

Real_Estate_Filters2.js

CheckedMultiSelect_Issue.html.zip

Find more posts tagged with

Accepted answers

All comments

rscheitlin

Michael,

Strange, Lucas's example worked for me in both FirsFox 31 and Chrome 36

deleted-user-yA_w_FC9FKe5

Thanks David. I tried this but it did not work. I really wish it were that easy.

For now I have removed all of the these and replaced them with dijit.form.MultiSelect. It is uglier but they seem to work fine.

Thanks to all who tried to help.

dcoley

I know this is a bit late in the game and hopefully not too obvious, but by setting up your dojoConfig var within a script tag of your html and setting up your packages, async and parseOnLOad options we've never had any issues:

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

Thanks,

David

deleted-user-yA_w_FC9FKe5

Lucas:

Thanks so much for helping and taking the time out of your schedule to try and help me. I download your zip file and tried it but it still does not work. I put the files in the same folder and tried to run them. The only place in your code where you reference the json file is below. Should I have put it someplace else.

xhr("Region_Filters.json", {

handleAs: "Json",

sync: "true"

}).then(lang.hitch(document, function(data){

Region_List = JSON.parse(data);

console.log(Region_List);

var sel = document.getElementById("Region_filter");

for (var i=0;i<Region_List.length;i++) {

sel.options=new Option(Region_List.text,Region_List.val);

}

}));

LucasDorrough

I wasnt saying to put all the districts in the HTML file, Those would go in a JSON file seperate from the HTML file. That way you still have the seperation of your files.

But there is probably a better way.

I attached a copy that hammered out, needs to be ran though IIS or apache because of chromes orgin rules. Not very efficent code because it does the request syncronously, but I just wanted to show what I was meaning.

CheckedMultiSelect_Issue.html.zip

deleted-user-yA_w_FC9FKe5

Thanks Ken. I know about AMD and only used the legacy because it was just the quickest way to get the code out there for you guys to view. I looked at the bookmark example but because it is a widget vs a CheckedMultiSelect box I'm not sure how to equate one to the other. Your eample shows me how to do it all in the one html file but I really want to seperate out the values just like the bookmarks. I have a feeling it would take you like 5 minutes to whip up an example like this. You seem to be a guru at this stuff.

deleted-user-yA_w_FC9FKe5

Thanks for the responses. When I turned parseOnLoad: from true to false I could see my values now.

However, the boxes don't look normal I have no idea what the parse does but feel it is very important. Not sure the order of how to load things but it seems like I should do this after putting these values into the CheckedMultiSelect. However, I thought that was one of the first things I was doing using this line of code.

kenbuja

You don't need to store all of them in the HTML file. Do some research on using modules in Dojo (here is a starting tutorial) where you can store the District information.

Take a look back at an old discussion of yours that uses bookmarks stored in a module. You can use the District information in a data store to populate the CheckedMultiSelection form, like in this example.

deleted-user-yA_w_FC9FKe5

Thanks for the quick response but that could make the code extremely long. For instance we have over 60 Districts. I would rather not have all of those listed in the html file if I can help it..

LucasDorrough

Thats a really interesting problem, the problem is chrome is not able to find the element by the ID, you might be better off putting the Real_Estate_Filters2.js file contents into the javascript secton of your code (tried this, and it worked), and then have a JSON file that you load all the options from.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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