Rails Cocoon Gem: заполнить несколько полей - PullRequest
Новая
       86

Rails Cocoon Gem: заполнить несколько полей

6 голосов
/ 07 марта 2020

Я использую cocoon gem в своем приложении rails, и у меня есть два вложенных поля внутри формы (категории, подкатегории). Изначально я показываю только первый, а второй скрыт. Каждый раз, когда первые выбранные поля имеют подкатегории, второе поле заполняется и отображается.

Вложенные поля: 

<div class="nested-fields">

  <%= form.input :category, collection: @categories, as: :grouped_select, group_method: :children, :label => false, :include_blank => true, input_html: { id: "first_dropdown" } %>

<div class="show_hide">
  <%= form.input :subcategories, label: false, :collection => [], :label_method => :name, :value_method => :id, required: true, input_html: { multiple: true, id: "second_dropdown" } %>
</div>

  <div class="links">
    <%= link_to_remove_association "Remove", form %>
  </div>
</div>

Это код, который изначально скрывает второе поле 

$('#first_dropdown').keyup(function() {

    if ($(this).val().length == 0) {
        $('.show_hide').hide();
    }
}).keyup();

Этот код показывает второй вход выбора, когда первый вход выбора имеет подкатегории: 

def select_item
  category = Category.find params[:category_id]
  render json: category.children
end


$('#first_dropdown').on('change', function() {
    $.ajax({
        url: 'categories/select_item?category_id=' + $(this).val(),
        dataType: 'json',
        success: function(data) {
            let childElement = $('#second_dropdown');
            if( data.length === 0 ) {
                $('.show_hide').hide();
            } else {
                $('.show_hide').show();
            }
            childElement.html('');
            data.forEach(function(v) {
                let id = v.id;
                let name = v.name;
                childElement.append('<option value="' + id + '">' + name + '</option>');
            });
        }
    });
});

Все работает хорошо для начального открытого поля. Но когда я добавляю больше полей и выбираю значение в любом из первых полей выбора, он заполняет все вторые поля в соответствии с этим значением. Я думаю, это потому, что я использую указанные c идентификаторы для этого, и когда я добавляю больше полей, все они имеют одинаковые идентификаторы. Как это настроить, чтобы я правильно заполнял второе поле выбора каждый раз, когда добавлял в форму больше вложенных полей?

1 Ответ

5 голосов
/ 07 марта 2020

Я бы дал ваши классы выбора вместо идентификаторов: 

<div class="nested-fields">
  <%= form.input :category, collection: @categories, as: :grouped_select, group_method: :children,
                 label: false, include_blank: true, input_html: { class: "first_dropdown" } %>

  <% if f.object.category && f.object.category.sub_categories.length > 0 %>
    <div class="show_hide">
      <%= form.input :subcategories, label: false, collection: form.object.category.subcategories, label_method: :name,
                     value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
    </div>
  <% else %>
    <div class="show_hide" style="display: none;">
      <%= form.input :subcategories, label: false, collection: [], label_method: :name,
                     value_method: :id, required: true, input_html: { multiple: true, class: "second_dropdown" } %>
    </div>
  <% end %>
  <div class="links">
    <%= link_to_remove_association "Remove", form %>
  </div>
</div>

, а затем нашел бы второй выбор относительно первого, добавив его к странице, указывающей c js файл: 

$(document).on('turbolinks:load cocoon:after-insert', function(){
  $('.first_dropdown').off('change').on('change', function(){
    let $this = $(this);
    let $second = $this.closest('.nested-fields').find('.second_dropdown');
    $second.children().remove();
    $second.closest('.show_hide').hide();
    if ($this.val() !== '') {
      $.ajax({
        url: 'categories/select_item?category_id=' + $(this).val(),
        dataType: 'json',
        success: function(data){
          if (data.length > 0) {
            $second.append('<option value=""></option>');
            data.forEach(function(v) {
              let id = v.id;
              let name = v.name;
              $second.append('<option value="' + id + '">' + name + '</option>');
            });
            $second.closest('.show_hide').show();
          }
        }
      })
    }
  });
});
...