Jquery применить обратный вызов на событие OnChange, которое вызывает API - PullRequest
Новая
       1

Jquery применить обратный вызов на событие OnChange, которое вызывает API

0 голосов
/ 09 октября 2019

Привет, я пытаюсь применить обратный вызов для использования в моих динамических полях выбора вместо TimeOut

В настоящее время у меня есть 4 поля выбора (3 являются динамическими опциями): Город, Район (варианты, основанные на городепараметры), Уорд (параметры, основанные на параметрах района) и улица (параметры, основанные на параметрах района)

Это форма поиска, поэтому на следующей странице формы должны быть предыдущие значения формы, я использую Django, чтобы определить, если предыдущийЗначения формы выбираются, тогда, если это так, он добавит скрытый div с id = "value-filter" в шаблоне. И теперь я использую Jquery, чтобы проверить, существует ли этот div для изменения опций выбора

Если пользователь щелкнет опцию city, тогда он активирует событие city onchange, чтобы вызвать API, который заполняет опции District соответствующимипараметры Id, Ward и Street одинаковы, но основаны на параметрах округа для вызова их API, чтобы заполнить их параметры. 

$(document).ready(function() {
  //call district api if city option is selected
  $('select#city').change(function(event) {
    $.getJSON("/api_get_districts/", {
      id: $(this).val()
    }, function(j) {
      var options = '<option selected disabled>-- District --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("select#district").html(options);
    });
  });
  //call ward and street api if district option is selected
  $('select#district').change(function(event) {
    $.getJSON("/api_get_wards/", {
      id: $(this).val()
    }, function(j) {
      var options = '<option selected disabled>-- Ward --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("select#ward").html(options);
    });
    $.getJSON("/api_get_streets/", {
      id: $(this).val()
    }, function(j) {
      var options = '<option selected disabled>-- Street --</option>';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
      }
      $("select#street").html(options);
    });
  });
  // main one to handle select option if the div of a values is present in html
  if ($('#district-filter').length) {
    $('select#city').val("{{ filter_form_values.city |safe }}").change();
    setTimeout(function() {
      $('select#district').val("{{ filter_form_values.district |safe }}").change();
      if ($('#ward-filter').length) {
        setTimeout(function() {
          $('select#ward').val("{{ filter_form_values.ward |safe }}").change();
        }, 500);
      }
      if ($('#street-filter').length) {
        setTimeout(function() {
          $('select#street').val("{{ filter_form_values.street |safe }}").change();
        }, 500);
      }
    }, 500);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Tỉnh </label>
  <select class="form-control form-control-sm" name="city" id="city" required="">
    <option selected="" disabled="">-- City --</option>

    <option value="1">Hà Nội</option>

    <option value="2">Hồ Chí Minh</option>

    <option value="3">Bình Dương</option>

    <option value="4">Đà Nẵng</option>

    <option value="5">Hải Phòng</option>

    <option value="6">Long An</option>

    <option value="7">Bà Rịa Vũng Tàu</option>

    <option value="8">An Giang</option>

    <option value="9">Bắc Giang</option>

    <option value="10">Bắc Kạn</option>

    <option value="11">Bạc Liêu</option>

    <option value="12">Bắc Ninh</option>

    <option value="13">Bến Tre</option>

    <option value="14">Bình Định</option>

    <option value="15">Bình Phước</option>

    <option value="16">Bình Thuận</option>

    <option value="17">Cà Mau</option>

    <option value="18">Cần Thơ</option>

    <option value="19">Cao Bằng</option>

    <option value="20">Đắk Lắk</option>

    <option value="21">Đắk Nông</option>

    <option value="22">Điện Biên</option>

    <option value="23">Đồng Nai</option>

    <option value="24">Đồng Tháp</option>

    <option value="25">Gia Lai</option>

    <option value="26">Hà Giang</option>

    <option value="27">Hà Nam</option>

    <option value="28">Hà Tĩnh</option>

    <option value="29">Hải Dương</option>

    <option value="30">Hậu Giang</option>

    <option value="31">Hòa Bình</option>

    <option value="32">Hưng Yên</option>

    <option value="33">Khánh Hòa</option>

    <option value="34">Kiên Giang</option>

    <option value="35">Kon Tum</option>

    <option value="36">Lai Châu</option>

    <option value="37">Lâm Đồng</option>

    <option value="38">Lạng Sơn</option>

    <option value="39">Lào Cai</option>

    <option value="40">Nam Định</option>

    <option value="41">Nghệ An</option>

    <option value="42">Ninh Bình</option>

    <option value="43">Ninh Thuận</option>

    <option value="44">Phú Thọ</option>

    <option value="45">Phú Yên</option>

    <option value="46">Quảng Bình</option>

    <option value="47">Quảng Nam</option>

    <option value="48">Quảng Ngãi</option>

    <option value="49">Quảng Ninh</option>

    <option value="50">Quảng Trị</option>

    <option value="51">Sóc Trăng</option>

    <option value="52">Sơn La</option>

    <option value="53">Tây Ninh</option>

    <option value="54">Thái Bình</option>

    <option value="55">Thái Nguyên</option>

    <option value="56">Thanh Hóa</option>

    <option value="57">Thừa Thiên Huế</option>

    <option value="58">Tiền Giang</option>

    <option value="59">Trà Vinh</option>

    <option value="60">Tuyên Quang</option>

    <option value="61">Vĩnh Long</option>

    <option value="62">Vĩnh Phúc</option>

    <option value="63">Yên Bái</option>

  </select>
</div>
<div class="form-group">
  <label>District </label>
  <div id="district-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="district" id="district">
    <option selected="" disabled="">-- District --</option>
  </select>
</div>
<div class="form-group">
  <label>Ward </label>
  <div id="ward-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="ward" id="ward">
    <option selected="" disabled="">-- Ward --</option>
  </select>
</div>
<div class="form-group">
  <label>Street </label>
  <div id="street-filter" style="display: none"></div>
  <select class="form-control form-control-sm" name="street" id="street">
    <option selected="" disabled="">-- Street --</option>
  </select>
</div>

Все работало отлично, но теперь я хочу попробовать изменить мою функцию timeOut в if ($ ('# district-filter'). Length) {}на обратный звонок. Я попробовал следующее с помощью метода when () для применения обратного вызова: 

if ($('#district-filter').length) {
    $.when($('select#city').val("{{ filter_form_values.city |safe }}").change()).then(function() {
        $.when($('select#district').val("{{ filter_form_values.district |safe }}").change()).then(function() {
            if ($('#ward-filter').length) {
                $('select#ward').val("{{ filter_form_values.ward |safe }}").change();
            }
            if ($('#street-filter').length) {
                $('select#street').val("{{ filter_form_values.street |safe }}").change();
            }
        });
    });
}

При загрузке страницы выбирается город и загружается район, но параметры района не выбираются, поэтому параметры Ward и Street такжепусто.

Как использовать функцию обратного вызова, чтобы дождаться, пока мой API заполняет опции, и затем выбрать эту опцию?

1 Ответ

0 голосов
/ 09 октября 2019

Я решил просто использовать обычный обратный вызов и добавить в чек функцию API запроса: 

if ($('#city-filter').length) {
    $('select#city').val("{{ filter_form_values.city |safe }}").change();
}
if ($('#district-filter').length || $('#ward-filter').length || $('#street-filter').length) {
    $.getJSON("/api_get_district/", {
        id: "{{ filter_form_values.city |safe }}"
    }, function(j) {
        var options = '<option selected disabled>-- District --</option>';
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
        }
        $("select#district").html(options);
        $('select#district').val("{{ filter_form_values.district |safe }}").change();
        if ($('#ward-filter').length) {
            $.getJSON("/api_get_ward/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Ward --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#ward").html(options);
                $('select#ward').val("{{ filter_form_values.ward |safe }}").change();
            });
        }
        if ($('#street-filter').length) {
            $.getJSON("/api_get_street/", {
                id: "{{ filter_form_values.district |safe }}"
            }, function(j) {
                var options = '<option selected disabled>-- Street --</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
                }
                $("select#street").html(options);
                $('select#street').val("{{ filter_form_values.street |safe }}").change();
            });
        }
    });
}

и добавить проверку города в html: 

<div id="city-filter" style="display: none"></div>

А теперь этоработал, но я приму любое предложение, чтобы улучшить его как ответ (так как вызов API 2 раза не считается хорошей идеей)!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...