这是一个销售维生素和营养补充品的购物车。我有一个货架模型作为占位符来显示产品。产品按服务组分组，包括30份，60份等...＆＃34;
使用链接，我尝试使用产品的补充事实图片打开模式。
我试图在链接中传递产品的ID，如下所示：
<%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product %>
还试过这个：
<%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :product_id => @product %>
问题是模态中的图片开放属于货架而不是产品。我猜测产品ID没有被传递给模态。 为了确认这种情况发生，我在模式中包含了这一行来检查产品ID，但我得到了货架ID：
<%= @product.id if @product.present? %>
这是一种更好的方法吗？：How to add bootstrap modal with link_to so the link content open in modal ? 我也没有成功地回答了那个问题的答案。
谢谢！
的routes.rb
Myapp::Application.routes.draw do
resources :servings
resources :brands
resources :categories
resources :charges
resources :shipping_addresses, only: [:update, :create, :edit, :destroy, :new, :index]
resources :subproducts
get 'order_items/create'
get 'order_items/update'
get 'order_items/destroy'
get 'check_shipping_address' => 'orders#check_shipping_address'
get 'my_account' => 'users#my_account'
resources :orders
resources :purchases, only: [:show, :destroy, :update]
# get 'orders/checkout' => 'orders/#checkout'
resources :products, only: [:show, :destroy, :update]
resources :shelves, only: [:show, :destroy, :update]
resource :cart, only: [:show]
resources :order_items, only: [:create, :update, :destroy]
get "admin" => "admin#index"
get "admin_products" => "admin#admin_products"
get "admin_edit_shelf" => "admin#edit_shelf"
scope '/admin' do
resources :products, only: [:create, :edit, :destroy, :new, :index]
resources :shelves, only: [:create, :edit, :destroy, :new, :index]
resources :attachments
resources :users
resources :zip_code_validations
end
resources :locations
scope do
get "locations_landing" => "locations#landing"
get "locations_invalid" => "locations#invalid"
end
get "user_location" => "locations#user_location"
devise_for :users, :controllers => {:registrations => 'registrations'}
# devise_for :users, controllers: { sessions: "users/sessions" }
root to: 'landing#hsnow_index'
get "commerce/store"
get "search_products" => "commerce#search_products"
get "search_shelves" => "commerce#search_shelves"
end
Serving.rb
class Serving < ActiveRecord::Base
has_many :products
belongs_to :shelf
end
Shelf.rb
class Shelf < ActiveRecord::Base
belongs_to :brand
has_many :attachments, dependent: :destroy
has_many :products
has_many :servings, dependent: :destroy
has_and_belongs_to_many :categories
belongs_to :category
has_attached_file :main_image, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
validates_attachment :main_image, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }
has_attached_file :facts, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
validates_attachment :facts, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }
#array of picture attachments
def attachments_array=(array)
array.each do |file|
attachments.build(:attachment => file)
end
end
# Search for shelves by name
def self.search_by_shelf_name(search)
where("LOWER(name) LIKE ?", "%#{search.downcase}%")
end
end
Product.rb
class Product < ActiveRecord::Base
has_many :order_items
has_many :attachments, dependent: :destroy
has_many :subproducts
has_and_belongs_to_many :categories
belongs_to :brand
belongs_to :shelf
belongs_to :serving
has_attached_file :main_image, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
validates_attachment :main_image, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }
has_attached_file :facts, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/product/factss/no-image-available"
validates_attachment :facts, content_type: { content_type: ["image/jpeg", "image/gif", "image/png"] }
default_scope { where(active: true) }
#array of picture attachments
def attachments_array=(array)
array.each do |file|
attachments.build(:attachment => file)
end
end
# Search for products by name
def self.search_by_product_name(search)
where("LOWER(name) LIKE ?", "%#{search.downcase}%")
end
end
货架控制器
def show
@order_item = current_order.order_items.new
@serving = Serving.new
@product = Product.find(params[:id])
@shelf = Shelf.find(params[:id])
@servings = @shelf.servings
end
货架/ show.html.erb
<!-- Serving groups and Products in servings -->
<!-- ################################ -->
<!-- ################################ -->
<% if @shelf.multiproduct? %>
<% @shelf.servings.each do |serving| %>
<div class="row">
<div class="col-xs-8 col-md-4 text-navy">
<h3><%= serving.serving_size %></h3>
</div>
<div class="col-xs-4 col-md-4 text-right">
<h3><strong><%= serving.price %></strong></h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<% if current_user.role_id == 1 %>
<%= link_to "edit", edit_serving_path(serving) %> |
<%= link_to "delete", serving, method: :delete, data: { confirm: 'Are you sure?' } %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 text-left">
<%= pluralize serving.products.count,'Flavor' %>
<hr style="margin-top: 5px;">
</div>
</div>
<% serving.products.each do |product| %>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="col-xs-6 col-md-4" style="<%= "padding-top: 0.6em;" if product.flavor.split.size <= 2 %> >"
<p><strong><%= product.flavor %></strong></p>
</div>
<div class="col-xs-2 col-md-4 " style="<%= "padding-top: 0.6em;" if product.flavor.split.size <= 2 %> >" >
<!-- Link to open modal with supplement facts picture-->
<!-- ################################ -->
<i class="fa fa-file-image-o" aria-hidden="true"></i> <%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product, class:"" %>
<!-- ################################ -->
</div>
<div class="col-xs-4 col-md-4 text-right">
<%= form_for @order_item, remote: true do |f| %>
<%= f.hidden_field :quantity, value: 1, class: "form-control", min: 1 %>
<%= f.hidden_field :product_id, value: product.id %>
<%= f.submit "ADD", class: "btn btn-secondary" %>
<% end %>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<% if current_user.role_id == 1 %>
<%= link_to "edit", edit_product_path(product) %> |
<%= link_to "delete", product, method: :delete, data: { confirm: 'Are you sure?' } %>
<% end %>
</div>
</div>
<br>
<% end %> <!-- end product block -->
<hr></hr>
<% end %> <!-- end servings block -->
<% end %> <!-- end conditional checking if shelf multi product is false -->
<!-- PRODUCT FACTS MODAL -->
<!-- ################################ -->
<!-- ################################ -->
<div class="modal inmodal" id="pictureModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<%= image_tag @product.facts.url if @product.present? %>
<%= @product.id if @product.present? %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
好的，我们从你的link_to开始：
<% serving.products.each do |product| %>
...
<%= link_to " Supplement Facts", "#pictureModal", "data-toggle" => "modal", :id => @product, class:"" %>
...
<% end %>
正如您从bootstrap文档（http://getbootstrap.com/javascript/#modals-examples）中看到的那样，您的案例中的模态ID为“#pictureModal”，因此您无需在link_to中使用:id => @product。
但是，您可以拥有多个产品，因此您需要为每个产品生成1个模态。
您需要在所有模态中使用唯一ID（例如：“＃pictureTodal _＃{product.id}”），这样您就可以在link_to中执行此操作：
<% serving.products.each do |product| %>
...
<%= link_to " Supplement Facts", "#pictureModal_#{product.id}", "data-toggle" => "modal", class:"" %>
...
<% end %>
现在查看您的模态
您需要迭代所有产品并生成相应的模态，如下所示：
<% @shelf.servings.each do |serving| %>
<% serving.products.each do |product| %>
<div class="modal inmodal" id="pictureModal_<%= product.id %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<%= image_tag product.facts.url if product.present? %>
<%= product.id if product.present? %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<% end %>
<% end %>
希望这有帮助