Rails：用数据填充模式

Question

我知道这是一个老问题，但我无法解决它.. 我想以特定于每次迭代的模态显示 cmets 列表。

内容has_many cmets，评论属于_to content`

@contents.each do |content| 
content.title
button_to('read', category_modal_path(:comment_id => content.id), remote: true, :class=> 'modal-trigger2', 'data-target'=>'modal3')
end

控制器

def category_modal
@comments = Comment.online.where(content_id: params[:comment_id])
respond_to do |format|
  format.js
end

模态

<div id="modal3" class="modal modal-fixed-footer">
...here I want show the list of comments

category_modal.js

$('#modal3').html(<%= j( render partial: 'shared/modal2', locals: {comments: @comments} )%> );

咖啡

$('.modal-trigger2').leanModal()

模态打开但没有数据..帮助会很好..

Answer 1

好的，经过一个小时的努力，我能够解决您的问题。请按照以下步骤操作。

1. 首先从咖啡脚本中删除$('.modal-trigger2').leanModal()。它不再需要了。

2. 在category_modal.js中粘贴以下代码

   $('#modal3').html("<div href='#modal3' id='content_<%=params[:comment_id] %>'><%= j( render partial: 'shared/modal2', locals: {comments: @comments} )%></div>");
   $('#content_<%=params[:comment_id]%>').leanModal();
   $('#content_<%=params[:comment_id]%>').trigger('click');
   

3. 您可能需要在您的类别列表中添加method: :get 如果您的路线不是post 类型，那么

   @contents.each do |content| 
     content.title
     button_to('read', category_modal_path(:comment_id =>content.id), remote: true, :class=> 'modal-trigger2',method: :get)
   end
   

好的，现在告诉我问题出在哪里。 基本上这是leanModal 的混乱，如果你使用过引导模式，那将不是问题。

基本上每当我们在任何元素上调用leanModal 它都会停止它的默认行为i-e Click 所以从现在开始，当有人点击它时，它会打开弹出窗口，其中显示href 中提到的相应内容单击的项目。

所以当我调用$('.SomeClass').leanModal() 时，它会为所有具有SomeClass 类的项目添加一个点击事件，并在有人点击它并显示内容时打开模式。

因此，在您调用$('.modal-trigger2').leanModal() 的情况下，它只是为您的所有内容按钮添加了一个单击事件，并在您单击其中任何一个时打开弹出窗口。它甚至没有向服务器发送 ajax 调用。 如您所知，modal3 容器中没有任何内容，这就是它打开空模式的原因。

所以现在我所做的是删除此调用并将所有弹出逻辑移至category_modal.js 因此，每当您单击内容时，它都会向服务器发送一个 ajax 请求。在 JS 视图中，我正在做与您相同的事情，但现在我在您的 comments 周围添加了一个包装器，并根据您请求的 content_id 设置 ID 唯一。 之后，我在这个新创建的包装 div 上调用 leanModal。 并在其上触发click 事件，因此模态将自动显示。

附言

你不一定需要这个动态 ID，下面的代码也可以工作。

$('#modal3').html("<div href='#modal3' id='leanModalContainer'><%= j( render partial: 'shared/modal2', locals: {comments: @comments} )%></div>");
$('#leanModalContainer').leanModal();
$('#leanModalContainer').trigger('click');