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

[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.

[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]

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.

[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]

Hmm thats odd, it was working when I sent it, did you use IIS or apache to host it on localhost or a test website? accessing a local file system is not possible due to same orgin policies on modern browsers

[deleted-user-yA_w_FC9FKe5]

We have IIS but I tested it using our webserver name.  If I can't use it from their it won't do me any good.  It is an intranet site. 

[LucasDorrough]

ahh Ive had trouble with some configurations and JSON, some servers have JSON turned off for some reason, sorry it could have been more help, I wish you good luck

[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 responses.  When I turned parseOnLoad: from true to false I could see my values now.

<script type='text/javascript' src='http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js' data-dojo-config="has:{'dojo-firebug':true}, parseOnLoad:false, async:true"></script>

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.

<script type="text/javascript" src="jsfiles/Real_Estate_Filters2.js"></script>