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的响应，我尝试使用数据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页面的初始布局。

Thx @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');
    }
});

我当然不能提供精确的代码，因此您需要根据当前设置进行调整

更新

想法是，您在show中有softwares_controller.rb个动作，最终将呈现模态的内容：

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')

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

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

然后，您将显示具有已更新内容的模式：

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

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

1 个答案: