Rails：用数据填充模式

Question

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

内容has_many条评论，评论所属内容

@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如果您使用了引导方式，那将不是问题。

基本上，每当我们在任何元素上调用leanModal ，它都会停止其默认行为， ie Click从现在开始ie Click So，然后单击它，然后打开弹出窗口，在其中显示被单击项的href中提到的相应内容。

因此，当我调用$('.SomeClass').leanModal() ，它将为所有具有SomeClass类的项添加click事件，并在有人单击它并显示内容时打开模式。

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

因此，现在我要做的是删除此调用，并将所有弹出逻辑移到category_modal.js因此，每当单击Content时，它都会向服务器发送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');