Question

我正在尝试根据四轮车的品牌，型号和车身类型的过滤来保存产品。

我在将产品详细信息保存到数据库/获取所选products_ids方面存在问题。

产品显示在结果div中，这是通过javascript动态生成的。

例如：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>';

但是当我点击提交按钮时，产品ID不会被保存/传递给控制器。

 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');
      }
      });

＆＃13;

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

＆＃13;

服务器日志

当我按ctrl + u时，我得到这样的结果div。在这里没有显示在表单代码中显示的复选框，但是当我检查elemrnt时，我可以看到附加的输入复选框div。不知道这里发生了什么

请帮忙。任何帮助都是值得赞赏的。

Answer 1

我认为我对你的评论应该解决了你的问题，因为它适合我我做了一个有点像你的演示：

的index.html

＆＃13;

<!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>

＆＃13;

data.json

＆＃13;

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

＆＃13;

我选中复选框，然后点击提交按钮，$('form').serialize()确实有效。

动态复选框不会保存到数据库

1 个答案: