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

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -