Динамический флажок не сохраняет в базу данных

Question

Я пытаюсь сохранить товары на основе фильтрации по марке, модели и типу кузова четырехколесного Уилера.

У меня возникла проблема с сохранением сведений о товаре в базе данных или получением выбранных products_ids.

Продукты отображаются в результате div, это динамически генерируется с помощью javascript.

ex: checkOptions += '<div class="col-xs-12 col-sm-12 col-md-4">' +'<label>' + '<input type="checkbox" id="service_product_ids" name="service[product_ids][]" value='+ result[i].id + '>' + result[i].name + '</label>' + '</label>' +'</label>' + '</div>';

Но когда я нажимаю кнопку отправки, идентификаторы продуктов несохранение / передача в контроллер.

 def service_params
  params.require(:service).permit(:name, :cost, :description, :hours, :body_type, :tax_id, :operation_category_id, products_attributes: [:id, :name, :description, :brand, :cost, :product_color, :selling_price, :tax_id, :_destroy],service_varients_attributes: [ :body_type, :make, :model, :cost, :id, :_destroy], service_product_ids: [], product_ids: [])
end

создание контроллера и новое действие

    def new
  if (params[:make_id].present? && !params[:body_type].present?)
    make = Make.find(params[:make_id])
    @model_name = make.models 
    render json: @model_name
  elsif params[:body_type].present?
    @products = Product.includes(:product_varients).where(product_varients: { body_type: params[:body_type], make: params[:make_id], model: params[:model_id] })
    puts "----products count----------"
    puts @products.count
    puts "--------------"
    render json: @products
    @service = Service.new
    @service.products.build
    @service.service_varients.build
  else
  @service = Service.new
  @service.products.build
  @service.service_varients.build
  end   
end 

def create
  @service = Service.new(service_params)
  respond_to do |format|
    if @service.save
      format.html { redirect_to @service, notice: 'Service was successfully created.' }
      format.json { render :show, status: :created, location: @service }
    else
      format.html { render :new }
      format.json { render json: @service.errors, status: :unprocessable_entity }
    end
  end   
end

отношение модели:

 Product belongs_to services
 services has_many products.

Ajax:

 $('#service_service_varients_attributes_0_body_type' ).change(function(){
        var make = $('#service_service_varients_attributes_0_make').val();

        var checkOptions = '', objectlength, result = {};
        var model = $('#categoriesDiv').val();
        var body_type = $('#service_service_varients_attributes_0_body_type').val();
        if ("#service_service_varients_attributes_0_make" != null ){
        jQuery.ajax({
            url: "<%= new_service_path %>",
            type: "GET",
            data:'make_id='+ make+'&model_id='+ model+'&body_type='+ body_type,
            dataType: "html",
            success: function (data) {
          result = JSON.parse(data)
          console.log(result);
          objectlength = result.length;
          for (var i = 0; i < objectlength; i++) {
             checkOptions += '<div class="col-xs-12 col-sm-12 col-md-4">' +'<label>' + '<input type="checkbox"  id="service_product_ids" name="service[product_ids][]" value='+ result[i].id + '>' + result[i].name + '</label>' + '</label>' +'</label>' + '</div>';
           }
                  $("#result").append(checkOptions);

        }
        });
      } else {
      jQuery('#result').html('Please Select');
      }
      });

    <div class="panel-body">   
       <div class="row" id="result" >
         
       </div>
    </div>

журнал сервера

при нажатииCtrl + UI получить результат div, как это.флажок, который отображается в коде формы, здесь не отображается, но когда я проверяю элемент, я вижу прикрепленный флажок ввода div.Понятия не имею, что здесь происходит

пожалуйста, помогите. Любая помощь будет благодарна.

Answer 1

Я думаю, что мои комментарии для вас должны были решить вашу проблему, потому что она хорошо работает для меня.
Я делаю демо, которое немного похоже на ваше:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <form method="post" action="">
        <div class="panel-body">
            <div class="row" id="result">
            </div>
        </div>
        <input type="submit" name="" value="Submit">
    </form>
    <script type="text/javascript">
    $(function() {
        $.ajax({
            url: "data.json",
            type: "GET",
            success: function(result) {
                var objectlength = result.length;
                var checkOptions = '';
                for (var i = 0; i < objectlength; i++) {
                    checkOptions += `
                        <div class="col-xs-12 col-sm-12 col-md-4">
                            <label><input type="checkbox"  class="service_product_ids" name="service[product_ids][]" value="${result[i].id}">${result[i].name}</label>
                        </div>
                    `;
                }
                $("#result").append(checkOptions);
            }
        });
        $('form').submit(function(e) {
            e.preventDefault();
            console.log($('form').serialize());
        });
    });
    </script>
</body>
</html>

data.json

[
    {"id": 1, "name": "Patience Wicox"},
    {"id": 2, "name": "Hayley Carver"}
]

Я отмечаю флажок, затем нажимаю кнопку отправки, и $('form').serialize() работает.