How can I retrieve dynamic added content using jQuery? -
my scenario this:
when page loaded, listbox countries loaded.
by selecting item dropw down list, country item in listbox selected using jquery.
now country selected in listbox, call function retrieves cities , populate city listbox.
the code looks this:
$('#mydropdownlist').change(function() { (...) // selected country set here populatecitylistbox(); //this alert undefined. because it's triggered before callback in populatecitylistbox() alert(jquery('#citylistbox option[value=oslo]').val()); }); function populatecitylistbox() { //get id selected country var ctryid = jquery("select#countrylistbox").val(); jquery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getcitiesbycountry', countryid: ctryid }, function(data) { var options = ''; (var = 0; < data.length; i++) { options += '<option value="' + data[i].city + '">' + data[i].city + '</option>'; } jquery("select#citylistbox").html(options); // alerts option text, oslo alert(jquery('#citylistbox option[value=oslo]').val()); }, "json"); }
my problem this: i'm not able retrieve values in city listbox after have run function populatecitylistbox();
. am able retrieve values in $.post callback.
what can able retrieve values after function triggered? (i know has stuff being callback, while others run "realtime"... or that).
you correct. since request asynchronous, code keeps on running. potentially substitute so:
$('#mydropdownlist').change(function() { (...) // selected country set here populatecitylistbox(function () { //this alert should work alert(jquery('#citylistbox option[value=oslo]').val()); }); }); function populatecitylistbox(callback) { //get id selected country var ctryid = jquery("select#countrylistbox").val(); jquery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getcitiesbycountry', countryid: ctryid }, function(data) { var options = ''; (var = 0; < data.length; i++) { options += '<option value="' + data[i].city + '">' + data[i].city + '</option>'; } jquery("select#citylistbox").html(options); // alerts option text, oslo alert(jquery('#citylistbox option[value=oslo]').val()); callback(); }, "json"); }
by placing callback
argument of populatecitylistbox
, able call function inside of change
there. in essence, 'modified' callback of sorts: executing yet function in callback. lets run function populatecitylistbox
independently in console , still able use application logic or whatnot.
hope helps.
Comments
Post a Comment