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