如何将产品的id传递给bootstrap模式

Question

我有产品和订单模型.产品有很多订单,订单属于产品.产品页面上有一个"订单"按钮,当用户点击它时,会打开一个引导模式.在这个模态上,我渲染订单的表单来创建一个新表单.

我想知道,如何将产品的id传递给modal上的这个表单？目前我打开模态的按钮看起来像这样:

%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Order

模态本身:

 #myModal.modal.fade{:role => "dialog"}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{"data-dismiss" => "modal", :type => "button"} ×
        %h4.modal-title Order form
      .modal-body
        = render 'orders/form'
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

我需要此产品的ID来创建一个属于该产品的新订单.如果我想错误的方向,请纠正我.

非常感谢您的帮助!

更新 解决了!! 非常多的感谢Arup Rakshit(@ArupRakshit)!

  - @products.last(3).each do |product|
     %h4= product.name
     %button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: product.id}} Order

    #myModal.modal.fade{:role => "dialog"}
      .modal-dialog
        .modal-content
          .modal-header
            %button.close{"data-dismiss" => "modal", :type => "button"} ×
            %h4.modal-title Order Form
          .modal-body
            #new_order
              = render 'orders/form', product: product
          .modal-footer
            %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close   

订单/形式:

= form_for Order.new do |f|
  = f.hidden_field :product_id
  = f.text_field :user_name, placeholder: 'Name', class: 'form-control'  
  = f.submit 'Order', class: 'btn btn-primary'

application.js中:

$( document ).ready(function() {
 $('body').on('shown.bs.modal', '#myModal', function (e) {
  var product_id = $(e.relatedTarget).data('product-id');
  $('#order_product_id').val(product_id);
 });
});

Answer 1

使用数据属性将产品保留在模态按钮中.喜欢

%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: @product.id}} Order

在表单内添加隐藏字段:

= form_for Order.new do |f|
  .form-group
    = f.text_field :user_name, placeholder: 'Name', class: 'form-control'
    = f.hidden_field :product_id

您需要在JS下面使用,以填充隐藏的字段值.

$('body').on('shown.bs.modal', '#myModal', function (e) {
  var product_id = $(e.relatedTarget).data('product-id');
  $('#order_product_id').val(product_id);
 });

#new_order是形式ID,改为你的形式.Bootstrap 模态事件.