Question

我对Rails很新，所以这对我来说很难理解。我小组中针对学校项目的前端人员设计了这个，以便当我点击“更多信息”时＃34;在显示的产品上的按钮上，弹出框显示在屏幕上，其中包含有关产品的更多信息。

如何让所选产品的信息可供我访问，以便我可以在弹出框中显示？我已尝试使用button_to :action，但我显然需要一个视图模板，但我不想这样做。我只想在弹出框中显示所选产品的信息，当用户点击“更多信息”时，会显示该信息。按钮。

这是我正在使用的代码：

<!-- Container for the Catalog Content -->
<div class="Catalog_page">
    <!-- List all products -->
    <% @products.each do |product| %>
        <div class="product_item">
            <span class="img"><%= image_tag product.image, size: "200x100" %></span>
            <h1><%= product.name %></h1>
            <!--<%= product.description %> Saved  this just incase we needed it-->
            <%= number_to_currency(product.price) %>
            <!-- Button that creates light box -->
            <button class="lightbox" id="button">More Info</button>
        </div>


    <%end%>
    <!-- backdrop is the black background of lightbox -->
    <div class="backdrop"></div>
    <!-- the box that we need to plug information to -->
    <div class="box"><div class="close"></div>
        I DON'T KNOW HOW TO PULL THIS INFORMATION FROM DATA BASE

    </div> 

</div>

Answer 1

有两种方法可以完成任务：

您可以渲染这些“更多信息”并将其隐藏起来，然后显示模态这些信息。

<% @products.each do |product| %>
  <div class="product_item">
    <span class="img"><%= image_tag product.image, size: "200x100" %></span>
    <h1><%= product.name %></h1>
    <!--<%= product.description %> Saved  this just incase we needed it-->
    <%= number_to_currency(product.price) %>

    <!-- Button that creates light box -->

    <!-- here is the link for each product to open its modal -->

    <a data-toggle="modal" data-target="#more-info-<%= product.id %>" class="lightbox">More Info</a>

    <!-- here is the modal content -->

    <div id="more-info-<%= product.id %>"  class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">More Info</h4>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>

  </div>
<% end %>

或者您可以通过ajax获取这些信息，然后在模态

<% @products.each do |product| %>
    <div class="product_item">
        <span class="img"><%= image_tag product.image, size: "200x100" %></span>
        <h1><%= product.name %></h1>
        <!--<%= product.description %> Saved  this just incase we needed it-->
        <%= number_to_currency(product.price) %>
        <!-- Button that creates light box -->
        <button class="lightbox fetch-info" data-product-id="<%= product.id %>">More Info</button>
    </div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
   <div id="fetch-result"></div>
</div>

然后，创建一个JS来获取数据：

$(".fetch-info").click(function() {
  var $input = $(this);
  $.ajax({
    type: "GET",
    url: "/product_info",
    data: {
      id: $input.data("product-id")
    },
    success: function(response) {
      $("#fetch-result").html(response);
    }
  });
});

然后，创建一个提供产品信息的操作：

def product_info
  @product = Product.find(params[:id])
  render layout: false
end

并使用您的自定义产品信息创建您的视图...

就是这样！

提示：如果您选择第二个选项，可以通过将操作调用为JSON（仅获取产品信息，然后在成功回调中，在那里添加html）来改进

Answer 2

这是一个索引页面，www.example.com / products。它显示了产品列表，点击后会打开一个灯箱。您将要做的是将每个产品的ID传递到按钮中，以便在打开灯箱时显示该产品的正确信息。 Alessandro的代码不会对您有所帮助，因为不会定义product.attribute1。

Rails - 如何使用按钮传输数据按

2 个答案: