Populating mutliple select box with JSON via ajax. Is this a bug or me being dumb?
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:
1. 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.
2. If data was returned, replace the child multi-select with the data.
3. 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.