JQuery Dynamic Objects load selectors

Question

I've a form when I click one radio button to load a subform. Ok this work perfectly, but has 3 selectors that I need external data when only this subform loaded. So, I did in this way:

$(document).on('focus', '#reemb', function () {
    $.getJSON("/banks.php", function (json) {
        $('#bank').empty();
        $.each(json, function (i, obj) {
            $('#bank').append($('<option>').text(obj.name).attr('value', obj.code));
        });
    });

    $.getJSON('/statecity.json', function (data) {
        var items = [];
        var options = '<option value="">State</option>';
        $.each(data, function (key, val) {
            options += '<option value="' + val.name + '">' + val.name + '</option>';
        });
        $("#state").html(options);

        $("#state").change(function () {

            var options_city = '';
            var str = "";

            $("#state option:selected").each(function () {
                str += $(this).text();
            });

            $.each(data, function (key, val) {
                if (val.name == str) {
                    $.each(val.city, function (key_city, val_city) {
                        options_city += '<option value="' + val_city + '">' + val_city + '</option>';
                    });
                }
            });
            $("#city ").html(options_city);

        }).change();

    });
});

This work fine, but everytime that I need to change one date the selectors clear and load again.

I tried to add tag onload to start the function to load selectors in this subform, but don't works. Also tried change events to .on, but also don't work. How I need to do this?

Thx!!

score 0 · Accepted Answer · answered Apr 12 '17 at 14:22

Not knowing what #reemb is, I would empty the relevant sub selects:

If the container holding the selects is ALSO emptied, you need to delegate all even handlers of objects inside too - like $(document).on("change","#bank", function() {

$(document).on('click', '#reemb', function() {
  $.getJSON("/banks.php", function(json) {
    $('#bank').empty();
    $.each(json, function(i, obj) {
      $('#bank').append($('<option>').text(obj.name).attr('value', obj.code)).change();
    });
  });

  $('#bank').on("change", function() {
    $('#city').empty();
    $.getJSON('/statecity.json', function(data) {
      var items = [];
      var options = '<option value="">State</option>';
      $.each(data, function(key, val) {
        options += '<option value="' + val.name + '">' + val.name + '</option>';
      });
      $("#state").html(options).change(); // if needed
    });

    $("#state").on("change", function() {
      var options_city = '';
      var str = "";
      $("#state option:selected").each(function() {
        str += $(this).text();
      });
      $.each(data, function(key, val) {
        if (val.name == str) {
          $.each(val.city, function(key_city, val_city) {
            options_city += '<option value="' + val_city + '">' + val_city + '</option>';
          });
        }
      });
      $("#city ").html(options_city).change(); // if needed
    });
  });
});

My code is biggest that this. I just post part of the code. Your answer help to change of location this getJSON is called. Now I call the getJSON together subform and this work. Thanks @mplungjan! — MarcosTaira, Apr 12 '17 at 14:40

JQuery Dynamic Objects load selectors

1 Answers1