在行单击时在引导模式中查看 rails 记录详细信息

Question

我已经被这个问题困扰了很长一段时间，并且也浏览了几篇文章，但是我无法完全实现我想要的 Rails 应用程序。本质上，我希望能够单击页面上的表格行并弹出一个模式，显示该特定记录的所有信息。以下是我部分想到/尝试的场景：

1. 用一些JS在表格行中设置data-link属性如下

HTML：

<tr data-link="<%= kid_path %>"> ... </tr>

JS：

$("tr[data-link]").dblclick(function() { window.location = $(this).data("link") })

这可以很好地打开脚手架生成的显示路径页面，但我无法修改它以使用模态并且在模态中为孩子提供相同的数据。

1. 使用 data-id 和 JavaScript 加载到模式

HTML：

<tr data-id="<%= kid.id %>"> ... </tr>

JS：

$(function () {
    $('#showModal').modal({
        keyboard: true,
        backdrop: "static",
        show: false,

     }).on('show', function () {

    });

 $(".table-striped").find('tr[data-id]').on('click', function () {
    debugger;

       $('#showDetails').html($('<p>' + 'Kid ID: ' + $(this).data('id') + '<%= Kid.find(30).first_name %>' + '</p>'));
       $('#showModal').modal('show');
   });
});

在这种方法中，我能够在单击行时加载模式并能够访问 Kid ID，但是我无法进一步访问记录的其他属性。例如，我想使用 JS 设置 @Kid = Kid.find(id) ，其中 id 是从行中提取的 ID。然后，我希望能够编写显示其他元素（例如，kid.first_name、kid.last_name 等）的通用模态模板。

我完全陷入困境，找不到任何有助于实现目标的方法。任何帮助表示赞赏，谢谢。

Answer 1

您需要 ajax 通话记录属性，因为 Kid.find(30).first_name 行在页面加载时不存在。

试试这个：

KidsController

def show
  kid = Kid.find(params[:id])
  respond_to do |format|
    format.html { // Usually show.html.erb }
    format.json do
      # Return kid as json object
      result = {
        first_name: kid.first_name,
        last_name: kid.last_name
      }
      # If you want to return the whole kid record attributes in json: result = kid.attributes.to_json 
      render json: result
    end
  end
end

尝试/kid/[:id].json 验证您没有收到UnknownFormat 错误。

JS

$(".table-striped").find('tr[data-id]').on('click', function () {
  var kid_id = $(this).data('id');
  $.getJSON("/kid/" + kid_id, function(data) {
    // Render the modal body here
    // first_name = data.first_name, last_name = data.last_name etc
    $('#showDetails').html($('<p>'+ data.first_name + '</p>'));
    $('#showModal').modal('show');
  });
})

如果您为Kid 模型设置了正确的路线，那么这些就是您所需要的。

更新：我在result 哈希中打错了字。固定