如何在点击缩略图时显示数据库记录？

Question

我有一个缩略图：

<% @books.each do |book| %>
    <div class="thumbnail">
        <div class="cash">
        <div class="triangle"></div>
            <p><%= book.price %> <img class="azn" src="<%= asset_path('azn.png') %>" alt=""></p>
        </div>
        <%= image_tag(book.image) %>
        <div class="shadow"></div>
        <% @book_id = book.id %>
        <%= hidden_field_tag 'id', @book_id %> # I saved ID here for searching later
    </div>
<% end %>

点击这些拇指，打开另一个拇指，其中包含数据库记录中的信息：

book_title, book_author etc.

如何通过clik上的ID从数据库中获取所有这些信息？

我在Cover.rb模型中编写了一个函数：

def self.book_info(id)
    Cover.where(id: id).select('book_title')
end

那么，如何在点击缩略图div时使用它并使用AJAX获取本书的book_title？

Answer 1

您可以执行以下操作

在视图中

<img class="azn" src="<%= asset_path('azn.png') %>" alt="" onclick="bookInfo(#{book.id})">

在JS中

  function bookInfo(bookId) {

       $.get('/books/get_book_info?id=' + bookId)
      }

在控制器

中

 class BooksController < ApplicationController

    def get_book_info
     @book = Book.find(params[:id])
   end

 end

现在在app / books / get_book_info.js.erb

中

   $('#some div').html("<p><%= j @book.book_title %></p><p><%= j @book.book_title %></p>")

应该有Book model / books表的book_title和book_author属性/列。

Answer 2

编写可以在ajax上调用的控制器方法。

$.ajax({
  url: "/controller method url",
  data: $(this).attr('data-id'),
}).success(function(data) {
  console.log(data);
});

data-id是用户点击的元素的属性，它将保存记录的id。

成功后，您将在响应中获取数据，并且可以在需要的地方使用它。

Answer 3

首先，您的thumbnail div将所有数据存储在数据属性中（我只会显示几个属性）：

<div class="thumbnail" data-author="<%= book.author %>" data-year="<%= book.year %>" data-price="<%= book.price %>"></div>

这将生成类似的内容（基于每本书的信息）：

<div class="thumbnail" data-author="Jaroslav Gashek" data-year="1989" data-price="3"></div>

现在我假设您将使用将弹出的模态窗口，并且可以使用js代码调用

$(#my_modal).show();

就像bootstrap-modal一样。但在打开模态之前，您需要根据数据属性将模态占位符中的信息替换为所选书籍中的信息：

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );

  // when all info is updated you open the modal
  $(#my_modal).show();
});

您需要在页面上显示您的模式（将被隐藏），并且仅在用户点击图书并更新模态中的信息时才会显示。 Modal应具有以下代码，以使上述脚本正常工作。

<div class="modal fade" id="my_modal">
  <div class="author"></div>
  <div class="year"></div>
  <div class="price"></div>
</div>

一种工作实例：

http://jsfiddle.net/k4sya4jz/1/

重要！该模式不应该像您在页面中拥有的书籍那样重复，只有当用户点击其他书籍时，它才会使用新信息进行更新。