Ruby on Rails - 显示具有不同内容的相同模式

Question

我有一个主页，其中包含一个表格中的软件列表。

通过此链接，我以模式打开我的软件页面：

<% = link_to software_path (software), remote: true do %> ... <% end%>

我创建了一个脚本，允许我在单击带有 .clickable 类的 td 时打开我的模态，而当我单击带有 .no-click 类的 td 时不打开模态。

$(".clickable").click(function(e) {
  if (!$(e.target).hasClass('no-click')) {
      $('#software-modal').modal('show');
    }
});

结构：

_software.html.erb 打开_software_modal.html.erb

问题： 当我尝试通过脚本打开我的模态时，它总是打开相同的模态。也就是点击软件2，软件3，...打开软件1的模态，直接用链接就没有问题了。

所以我的脚本中有 id 或类似问题...

你能帮帮我吗？

编辑 1：根据 VAD 的响应，我尝试使用 data-id 搜索 id。

_software.html.erb

<tr class="clickable" data-id="<%= software.id %>">
...
</tr>
<div id='software-content'></div>

_software_modal.html.erb

<div id="software-modal" class="modal fade" role="dialog">
...
</div>

show.js.erb

$('#software-content').html("<%= j render 'software_modal', software: @software %>");
$('#software-modal').modal('show');

这个 show.js.erb 允许我通过示例链接打开我的模式：

<%= link_to software.name, software_path(software), remote: true,class:"no-click" %>

但不是通过可点击的表格。

所以我在 _software.html.erb 中添加了一个脚本，使我的表格可点击：

  $(".clickable[data-id]").click(function(e) {
    if (!$(e.target).hasClass('no-click')) {
      window.location = '/softwares/' + $(this).attr('data-id');
    }
});

我也尝试使用数据链接，...有没有办法在模式中打开这个 window.location（如链接）？我昨天搜索了几个小时，但我没有找到任何东西..

编辑 2

根据@VAD 的响应，渲染布局：false，我们可以输入：

class ApplicationController < ActionController::Base
   layout proc{|c| c.request.xhr? ? false : "application" }
end

允许对 js 进行虚假渲染，对 html 进行真实渲染。所以要让我的 html 页面与我的起始布局保持一致。

谢谢@dogenpunk Render without layout when format is JS (needs drying)

Answer 1

对于要从中显示模态的每个位置，您都需要有不同的模态。就像software1 一样，您需要显示具有与此特定对象相关的内容的模式。对于software2，您需要展示相同的模型，但具有相对于software2 的全新内容

另一种选择（也是更好的选择）是，您可以为每个 Software 对象拥有一个模态，但通过某些事件（例如实际显示模态），您将使用特定于此的数据更新模态内容特定的Software 对象。您可以为此使用一些控制器操作

附加

尝试在 clickable 元素中将软件 ID 作为数据参数传递，然后使用 ajax 等更新模态内容

<div class = 'clickable' data-id = "#{software.id}">
</div>

$(".clickable").click(function(e) {
  if (!$(e.target).hasClass('no-click')) {
      $.get('/softwares/' + $(this).attr('data_id'), function(data) {
        $('#software-modal body').html(data);
      }); 
      $('#software-modal').modal('show');
    }
});

当然我不能给出精确的代码，所以你需要根据你当前的设置来调整它

更新

这个想法是你在softwares_controller.rb 中有show 动作，它最终会为你的模态渲染内容：

def show
  // some code you need
  render layout: false
end

它将呈现show.html.erb 视图。在该视图中，您应该保留模态内容的 html。请注意，该操作将在没有布局的情况下呈现该视图。你需要这个，因为你很快就会把这个 html 放入模态框，所以你不需要像布局这样的任何额外的 html。

因此，您有一个操作，它通过其 id 为每个 software 对象呈现模式内容。

现在您需要将其放入模态框。

您的标记中有clickable 元素。您将通讯员software id 附加到他们作为data-id。然后在您的 jquery 代码中，您使用这些 id 来构造一个这样的 url：

'/softwares/' + $(this).attr('data_id')

此网址将引导您在softwares_controller.rb 中执行show 操作。因此，通过单击 clickable 元素之一，您获取 id，使用它生成 url，向 url 发送请求，获取响应（模态内容），然后将其放入模态，如下所示：

$.get('/softwares/' + $(this).attr('data_id'), function(data) {
  $('#software-modal body').html(data);
}); 

然后您显示已更新内容的模式：

$('#software-modal').modal('show');