ruby-on-rails - Rails - 如何通过按下按钮传输数据

Question

我对 Rails 还很陌生，所以这对我来说很难理解。我的学校项目组的前端人员设计了这个，这样当我点击所显示产品上的“更多信息”按钮时，屏幕上会出现一个弹出框，其中包含有关该产品的更多信息。

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

这是我正在使用的代码:

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

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

就是这样!

提示:如果您选择第二个选项，您可以通过以 JSON 形式调用操作来改进(仅获取产品信息，然后在成功回调中添加 html)