在行单击时在引导模式中查看 rails 记录详细信息 [英] View rails record details in bootstrap modal on row click

问题描述

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

I have been stuck on this problem for quite some time now and looked through several posts as well, however I cannot achieve exactly what I want for my Rails application. Essentially, I want to be able to click on a table row on my page and have a modal pop up which displays all the information for that specific record. Here are the scenarios which I have thought of/attempted partially:

1. 使用一些JS设置表格行中的数据链接属性，如下所示

HTML:

...</tr>

JS:

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

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

This worked fine to open the show path page generated by the scaffold, but I was not able to modify it to work with a modal and have the same data for the kid in the modal.

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

HTML:

...</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 等)的通用模态模板.

In this approach I am able to load the modal on row click and am able to access the Kid ID, however I cannot move further to access other attributes of the record. For example, I want to set @Kid = kid.find(id) using JS where id would be the extracted ID from the row. And then, I want to be able to write the generic modal template which displays other elements (ex. kid.first_name, kid.last_name, etc).

我完全被困住了，找不到任何有助于实现目标的方法.任何帮助表示赞赏，谢谢.

I am totally stuck and cannot find any approach that helps to accomplish my goal. Any help is appreciated, thank you.

推荐答案

需要ajax调用记录属性，因为时间页不存在Kid.find(30).first_name行已加载.

You need to ajax call record attributes because the line Kid.find(30).first_name doesn't exist at the time page loaded.

试试这个:

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 错误.

Try /kid/[:id].json to verify that you are not getting UnknownFormat error.

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 模型设置了正确的路线，那么这些就是您所需要的.

If you have setup correct route for Kid model then these are what you needed.

更新:我在 result 哈希中打错了字.固定

UPDATED: I made a typo in the result hash. FIXED

这篇关于在行单击时在引导模式中查看 rails 记录详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！