• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Why are my drop-down options lists undefined when they only contain one option?

 
Ranch Hand
Posts: 66
3
Netbeans IDE Notepad Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi!

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:

> selField.options[selField.options.length] = oItem;

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[0] = 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.

But this is the weird part to me: I did not have to deal with this on the other page, which is currently working. But I *did* have to deal with this on an unrelated dropdown-populating javascript function. It appears that these seemingly identical lists on different pages are having different behavior at different times for no apparent reason but that seems unlikely, which leads me to believe that there's a reason this is happening that I'm just not aware of; something to do with how arrays work in javascript, or how dropdown selectors work. What would cause javascript to treat a list with 1 option as a list in some cases and act like it's undefined in other cases?

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.
 
Alex Lieb
Ranch Hand
Posts: 66
3
Netbeans IDE Notepad Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Derp. I meant to say this:

> It works because it doesn't try to call .length on selField.options
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why aren't you using jQuery where all of this can be simplified to a few lines of code?
 
Alex Lieb
Ranch Hand
Posts: 66
3
Netbeans IDE Notepad Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

jQuery...

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.
 
Alex Lieb
Ranch Hand
Posts: 66
3
Netbeans IDE Notepad Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

Also it turns out the javascript I had initially was working just fine, even though on further review of it I'm seeing things that I feel *shouldn't* work, so I'm going to continue using that. I liked the jQuery thing, but it isn't noticeably faster, and the other possible benefit I could get would be improved code readability. I feel like the benefits in that area were mild... I'm going to keep using the old way for now because I know what it does, I know why and how it does it, and until I have a chance to fix it everywhere at once I'd rather not start changing it all piecemeal-like, but I'm thinking I will change that over to use jQuery one of these days.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic