[jQuery] Modify selection in dynamically generated menu
In my first jQuery project, I'm trying to setup a form that has
certain pieces dynamically generated based on menu selections. I have
a button that loads json via Ajax and adjusts select values of the
items in my form. Each of the selects in the form also has a related
menu dynamically loaded via Ajax either when the select above it is
changed or when the value is changed via the earlier button. I am
trying to set the select values on the related menu based on the json
from the button, and it's not accessing the data. The code is pretty
long so I've tried to include just the relevant snippets.
Snippet from the code that generates the select menu (goes in a div
below the other select menu):
display_string = "<label for=\"" + temp_field + "\">" + data
['socket' + i] + " Socket:</label> <select name=\"" + temp_field + "\"
id=\"" + temp_field + "\">";
display_string += $j('#gemtest').data(gemtype);
display_string += "</select><br />\n";
$j('#' + display_name).append(display_string);
This part shows up properly (i.e. is displayed when the initial menu
has a selection generated via the button or the user).
I have tried three different methods (two via jquery and one via basic
javascript) to change the selected value and neither is working:
$j('#' + socketname).val(gear[slotkey][socketkey]);
$j("select[name='" + socketname + ']).val(gear[slotkey][socketkey]);
or
document.getElementById(socketname).value = gear[slotkey][socketkey];
(socketname here is set to the same value that was used for the id of
the select form above)
When I use the jquery way, the value it gets is undefined (not getting
an error but if I put the same value in an alert output that's what I
get). With the javascript way I get the error: "document.getElementById
(socketname) is null".
I've verified that all the variable names are what they're expected to
be and that I am correctly getting the right value in gear[slotkey]
[socketkey] (the one I want to set the menu selection to).
I'm assuming this problem is related to the fact that the fields are
generated dynamically, but I'm not really sure how to work around this
problem. I was able to use livequery to get the on change event to
work on the select menus in the first place, but I can't find any
details on whether I need it just to access values that were
dynamically generated, and if so how I'd do it (using a selector
similar to the one I used for the livequery didn't work)- everything
I'm reading on livequery makes it sound like it's only used to bind
events, not access data. My livequery piece is:
$j("select[name^='socket']").livequery('change', checkBonus);
Anyone have any idea how I can go about changing my dynamically
generated select values properly? Thank you for your assistance.