Добавление опций выбора вручную не всегда работает правильно, и даже если это так, вторая попытка всегда будет неудачной. - PullRequest
Новая
       10

Добавление опций выбора вручную не всегда работает правильно, и даже если это так, вторая попытка всегда будет неудачной.

1 голос
/ 08 июля 2019

Я хочу создать модальное поле с тремя текстовыми полями, и при отправке мне нужно предотвратить дефолт в браузере (чтобы не перезагружать страницу, если какие-либо данные были помещены рядом с модальным), а затем отправлять данные в бэкэнд через AJAX, а затем вручную обновите select_2 с отправленным параметром.

Изменение типов переменных, разбиение .trigger ("change") на новую строку или обнуление объекта опции после добавления его, похоже, ничего не меняет. 

<div class="sampling-register">
  <div class="ibox">
    <div class="ibox-content">
      <form>
        <div class="section">
          <div>
            <%= select_tag :client, grouped_options_for_select(@clients),
                           :include_blank => 'Wybierz klienta', class: 'select2_demo_2', required: true %>
            <button type="button" data-toggle="modal" data-target="#client_modal">
              <%= image_tag 'laboratory/add_circle_blue' %>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

<div class="modal inmodal" id="client_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content animated fadeIn">
        <div class="modal-header">Dodaj klienta</div>
        <%= form_for :client, url: clients_path, :html => {:id => "form_add_client"} do |f| %>
          <div class="modal-body">
            <%= f.hidden_field :laboratory_id, value: current_user.company.laboratory.id %>
            <%= f.text_field :name, class: 'form-control', placeholder: 'Nazwa', required: true %>
            <%= f.text_field :address, class: 'form-control', placeholder: 'Adres' %>
          </div>
          <div class="modal-footer">
            <button class="discard" data-dismiss="modal">Anuluj</button>
            <button class="submit">Dodaj</button>
          </div>
        <% end %>
      </div>
    </div>
  </div>

<script>
    let form = $("#form_add_client");
    let submitBtn = form.find(".submit");
    let client_select_tag = $("#client");

    form.on("submit", function (event) {
        event.preventDefault();
        let name = $('#client_name').val();
        let client_address = $('#client_address').val();
        let laboratory_id = $('#client_laboratory_id').val();

        $.ajax({
            url: '/clients',
            method: 'POST',
            dataType: "json",
            data: {
                client: {
                    name: name,
                    address: client_address,
                    laboratory_id: laboratory_id
                },
            }
        })
            .done(function (result) {
                if (result.error) {
                    toastr["error"](result.error);
                } else {
                    let option = new Option(result.data.name, "{lab_client_id: " + result.data.id + "}", false, true);
                    client_select_tag.children().eq(2).append(option).trigger('change');
                    $('#client_modal').modal('hide');
                    toastr["success"]("Klient dodany poprawnie");
                }
            })
    })
</script>

Проблема в том, что она работает, но иногда не работает (как каждая третья попытка), и даже если она работает один раз, то любая другая попытка будет неудачной, пока я не перезагружу страницу. После перезагрузки снова похоже на бросок монеты. Он запускает добавленную опцию как выбранное КАЖДОЕ время, но на самом деле добавление в список выбора происходит не так часто.

1 Ответ

0 голосов
/ 10 июля 2019

ОК, кажется, что изменение 

client_select_tag.children().eq(2).append(option).trigger('change');

на 

client_select_tag.select2().children().eq(2).append(option).trigger('change');

делает код работоспособным

...