Обновление поля коллекции в форме Rails на основе ввода в предыдущее поле в той же форме

Question

Я - любитель моего первого проекта. В форме oranizer может выбрать несколько событий в коллекции выбора. Я хочу, чтобы эти события были доступны как варианты в коллекции флажков поля массива ниже в той же форме.

Сначала организатор выбирает события:

<%= f.input :events, collection: @organizer.events.order(:start_time).reverse, label_method: :event_name_and_date, input_html: {multiple: true, id: "event_select"} %>

Затем это поле коллекции флажков (и другие подобные в форме) должны динамически обновляться с ранее выбранными событиями в качестве параметров, поэтому идентификаторы отмеченных событий отправляются в массиве параметров.

<%= f.input :events_to_include_in_event_pass_1, :collection => ["(previously selected events", "etc"], :as => :check_boxes, include_hidden: false, :input_html => {:multiple => true, id: "event_pass_select"} %>

У меня есть ajax:

$('#event_select').on('change', function(){
  var grab_events = $('#event_select').val();
  var hpeData = '{"hpe": "' + grab_events + '"}';
  $.ajax({
    type: 'post',
    url:'/events/get_the_e',
    dataType:'json',
    contentType:'application/json',
    data: hpeData,
    success:function (data) {
      ... $("document.forms["eventForm"]["events_to_include_in_event_pass_1"].collection_value(?)").update_with('data.hpe.each.event_name_... and_id_somehow_gets_added')
    }
  });
}

, который возвращает экземпляры, выбранные в первой коллекции поле, но я не знаю, как динамически изменить коллекцию #event_pass_select с этими экземплярами. ... это вообще возможно? Или есть какой-нибудь общий лучший способ настроить что-то подобное?

Answer 1

Не требуется ajax вызов - он берет данные из браузера, отправляет их обратно на сервер, а затем обновляет браузер.

Небольшой jQuery поможет. Прочитайте выбранные параметры и используйте их, чтобы заполнить желаемый ввод. Примерно так ...

$('#event_select').on('change', function(){
  $("#event_pass_select").empty();
  $("#event_select option:selected").each(function() {
    var val = $(this).val();
    var text = $(this).html();
    $("#event_pass_select").append( $("<option>")
      .val(val)
      .html(text)
    );
  });
});

Измените '#event_pass_select' на соответствующий контрольный идентификатор в вашей форме.

Answer 2

Я не осознавал, что input_ html на самом деле работал, он просто применял идентификатор к каждому флажку, а не ко всему вводу. Я понял это, нажав «изменить как html» в Ctrl c. Я также видел все html, которые составляют каждый флажок, и подумал, что я попытаюсь поместить все это там, а не просто вариант, и это сработало. Это, вероятно, результат простой формы? Я ценю помощь dbugger.

$('#event_select').on('change', function(){
  var asdf = 1;
  $("#event_select option:selected").each(function() {
    var val = $(this).val();
    var text = $(this).html();

    if (asdf === 1) {
        $(".festival_multipass_ticket_1_hpe span").empty(); 
        $(".festival_multipass_ticket_1_hpe").append( $('<span class="checkbox"><label for="festival_multipass_ticket_1_hpe_' + asdf + '"><input class="check_boxes optional" type="checkbox" value="' + val + '" name="festival[multipass_ticket_1_hpe][]">' + text + '</label></span>')
        );
    } else {
        $(".festival_multipass_ticket_1_hpe").append( $('<span class="checkbox"><label for="festival_multipass_ticket_1_hpe_' + asdf + '"><input class="check_boxes optional" type="checkbox" value="' + val + '" name="festival[multipass_ticket_1_hpe][]">' + text + '</label></span>')
        );
    }

  asdf += 1;
});