paulferree — 2011-01-31T12:35:45-05:00 — #1
I hope I can articulate this well enough...
I have a multiple select box that is dynamically populated based on a selection from another select box. There are 3 possible results:
Every click on the parent select box replaces the html of the child <select> with a "Loading..." message. Then it runs an ajax request to a server side page that returns JSON data back to the post-processing function.
In that post-processing function I check to see if any data was returned for that selection.
If data was returned, replace the child multi-select with the data.
If no data was returned then replace the child multi-select with a default message.
Now the problem I'm seeing. When I select an item from the parent select that I know returns data, the child multi-select seemingly doesn't update, but when I mouse over the select I see the changes.
BUT! On a whim, I created another <div> just to see if it was in fact a problem with the select, so everytime I updated the <select> I also updated this new <div>. Magically it all worked. So what I ended up doing is keeping the <div> there, just set it to display:none and now it works like it "should".
Any ideas as to what this is all about!?
Oh and I'm using jQuery.ajax and jQuery.html to handle the processing.
raffles — 2011-01-31T12:51:09-05:00 — #2
Seems pretty weird. Do you have any mouseover events on the select or this div? The purpose of the DIV is a bit mysterious. Is this simply a container for the SELECT?
Also, replacing the HTML of the <select> with a message sounds like invalid HTML. A <select> can only contain <option> or <optgroup> elements.
Another possibility is some browser bug (particularly if testing on IE) to do with creating <option> elements on the fly. I can't remember what the exact bug is, but I think it's that you can't create them with innerHTML.
Anyway, code is worth a thousand words. If you can provide a working link then we can Firebug it and get to the bottom of this.
paulferree — 2011-01-31T13:32:29-05:00 — #3
The intial purpose was just to see if the behavior was the same using a different element. To debug whether it was my ajax or overall js methodology. And when it actually snapped the <select> in gear I was shocked.
Well, the message is this:
<option value="" disabled="disabled">Loading...</option> , so it's all good
It is in IE and it's an intranet site. It would take quite a bit to get an online test version working.
At least I'm not crazy. I'll look into that IE bug, thanks!
paulferree — 2011-01-31T13:34:34-05:00 — #4
raffles — 2011-01-31T14:24:31-05:00 — #5
Hah! We were both right.
If you don't want to have the extra DIV, just use normal DOM methods (i.e. createElement).