How can I retrieve dynamic added content using jQuery?

Question

My scenario is this:
When the page is loaded, a listbox with countries is loaded.

By selecting an item from a dropw down list, a country item in the listbox is selected using jQuery.

Now that a country is selected in the listbox, I call a function which retrieves cities and populate a city listbox.

The code looks something like this:

  $('#MyDropDownList').change(function() {
      (...) // Selected country is set here

      populateCityListBox();

      //this alert is undefined. Probably because it's trigered before the callback in populateCityListBox()
      alert(jQuery('#cityListBox option[value=Oslo]').val()); 
  });

  function populateCityListBox()
  {
    //Get ID for 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 = '';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';
          }
          jQuery("select#cityListBox").html(options);

          // This alerts the option text, which also is Oslo
          alert(jQuery('#cityListBox option[value=Oslo]').val()); 
      }, "json");
  }

My problem is this: I'm not able to retrieve values in the city listbox after I have run the funtion populateCityListBox();. I am able to retrieve values in the $.post callback.

What can I do to be able to retrieve the values after the function is triggered? (I know it has to do something with some stuff being callback, while others run "realtime"... or something like that).

Answer 1

You are correct. Since your request is asynchronous, the code keeps on running. You could potentially substitute something like so:

$('#MyDropDownList').change(function() {
      (...) // Selected country is set here

      populateCityListBox(function () {
          //this alert should work now
          alert(jQuery('#cityListBox option[value=Oslo]').val());
      });


  });

  function populateCityListBox(callback)
  {
    //Get ID for 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 = '';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';
          }
          jQuery("select#cityListBox").html(options);

          // This alerts the option text, which also is Oslo
          alert(jQuery('#cityListBox option[value=Oslo]').val());
          callback(); 
      }, "json");
  }

By placing callback as an argument of populateCityListBox, we are able to call that function inside of your change up there. In essence, it is just a 'modified' callback of sorts: we are just executing yet another function in the callback. This lets you run the function populateCityListBox independently in a console like you could and still be able to use the application logic or whatnot.

Hope this helps.