如何将产品 ID 传递给 bootstrap 模态

Question

我有产品和订单型号。产品有很多订单，订单属于产品。产品页面上有一个按钮 'Order'，当用户单击它时，会打开一个 bootstrap 模式。在这个模态上，我渲染订单的形式来创建一个新的。

我想知道，如何将产品的 ID 传递给此模态表单？目前我打开模式的按钮如下所示：

%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"} &times;
        %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"} &times;
            %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

orders/form:

= 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 modal events.

如何将产品 ID 传递给 bootstrap 模态

How to pass product's id to bootstrap modal

ruby-on-rails

bootstrap-modal