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

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.

如何通过点击 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_title 和 book_author attribute/column 书 model/books table.

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>

现在我假设你将使用一个模式window，它将弹出并且可以用 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/

重要！模式不应重复您页面中的书籍数量，只有当用户点击另一本书时，模式才会更新为新信息。

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

How can I show the database record on click on the thumbnail?

ruby-on-rails

ajax