Question

我已经在这个问题上坚持了很长一段时间并查看了几个帖子，但是我无法完全达到我想要的Rails应用程序。基本上，我希望能够点击页面上的表格行并弹出一个模式，显示该特定记录的所有信息。以下是我一直想到/尝试过的情景：

使用一些JS在表行中设置data-link属性，如下所示

HTML：

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

JS：

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

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

使用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哈希中输了一个拼写错误。固定

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

1 个答案: