I'm trying to make a page update a dropdown using an ajax request. The idea is there's a few dropdowns in a row on this page where you don't know what the options for the next one will be until the previous one is selected.
I could solve this pretty easily by just submitting the page every time a dropdown is selected, but that would be cumbersome and inconvenient and more complicated than it should need to be. We would prefer to just make an ajax call when a dropdown is selected to get the items to put in the next list, then populate it in the onreadystatechange function.
I'm running into a strange bug though. Right now I have this as my onreadystatechange function: (Names changed for secret spy reasons)
There's multiple lists like the one above, and each one calls a function onchange that populates the options in the next one.
Soooo the issue is when you try to select the first one in the page I'm working on now, it has an issue with this:
Because it says selField.options is undefined. I actually ran into this exact same problem on an unrelated page a week ago or so and I realized that whenever the options list only had one item in it, it treated it as if it were NOT a list; so when you tried to get "options" from the field, it didn't find an options list and thought it was undefined. But I know it's still able to add options to the list because note: It doesn't have *zero* options, it has 1 option. The line that adds that option is in a different function, but it looks like this:
> selField = new Option('---', '0');
It works because it doesn't try to call .options on selField; it just tells it "Hey, I want to set the first index"; so it doesn't throw a "selField.options is undefined" error, and so on and barf and so on... I know it's that the options object itself is undefined because I called on it in the console and it told me it was undefined there too, so the issue is technically with the .length part, since I'm making a call on an undefined object, but the root of the issue is that it thinks selField.options === undefined.
For now I'm going to see if I can get it to work by using "i" as the array index in the options-population loop; it does appear to be able to add options to the list even if it says it's undefined when you call .length on it, which doesn't make sense if the object really is undefined, but I'm going to try it anyway and come back here in a bit with the results.
Using 'i' as the index did not work. I did learn something though:
clearDropDown isn't working either, it just looks like it's working... But again, I'm confused because it *is* working in the other pages with lists built the exact same way.
I didn't realize you could use jQuery for this; thanks!
I now have this:
And it works now, but unfortunately I have less than zero understanding of *why* it works. And until I understand why it works, I'm not really going to be able to apply it freely in other situations, and I won't understand why I have to use this here and the other code is acceptable on our other site. Also this does append all the options to the list, but because clearDropdown is failing silently, it doesn't clear out old options, so you end up with that value=0 "---" still in the list after it populates, and if I were to select the year multiple times I'd end up with a never-ending frankenlist. I'd like to get rid of that, but I'm still not clear on why clearDropDown doesn't work on this page in the first place.
I found it. Derp. Derp derp.. Derrrrrp. I feel bad for spending this much time on this.
I changed the names up, but what this boils down to is that hidden property up there should have been called "descriptionOfTheThing", not "theThing". The JS was treating theThing as if it had no options list because the first one it found *didn't* have an options list... Because it *wasn't* a dropdown selector.
So yeah. It's working now. I can't believe I didn't see that earlier. I realize that I probably could have avoided this kind of issue by... You know, not giving my variables names like "thing" and "thingDesc", but unfortunately I have to do it that way at the moment for reasons relating to a necessary discrepancy between labels and their values, and relating to the circumstances in which they're saved and reloaded on other pages.
What part of the jQuery version (which can still be simplified further) is not clear to you?
The "old way" is going to start head-butting you with browser inconsistencies sooner rather than later. There's a reason very few professional developers don't use browser-assist frameworks or libraries.
P.S. The backend is returning XML? Is that your choice?