Schienen: Populating modal mit Daten

Question

Ich weiß, das ist eine alte Frage, aber ich kann es nicht gelöst .. Ich möchte eine Liste von Kommentaren in einem Modal, spezifisch für jede Iteration zeigen.

Inhalt has_many Kommentare, Kommentar belongs_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 

Controller

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

die modalen

<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})%>); 

Kaffee

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

Modal öffnet aber keine Daten .. Hilfe wäre sehr schön ..

Answer 1

Okay, nach einer Stunde Bemühungen ich in der Lage bin Ihr Problem zu lösen. Folge diesen Schritten.

1. Zuerst entfernen Sie $('.modal-trigger2').leanModal() von Kaffee-Skript. Es braucht nicht mehr.

2. In category_modal.js fügen Sie den folgenden Code

   $('#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. Möglicherweise müssen method: :get auf Ihrer Kategorie Liste hinzufügen Wenn Sie Ihre Route nicht von post Typ ist so

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

jetzt okay, sagen ich, was war das Problem. Grundsätzlich war es das Chaos von Wenn Sie Bootstap Modal verwendet haben, wäre es nicht das Problem. Grundsätzlich

Jedes Mal, wenn wir leanModal auf ein beliebiges Element rufen Sie stoppt es Standardverhalten i-e Click Von nun an, wenn einige ein Klick darauf an, das Popup geöffnet, in dem es den entsprechenden Inhalt zeigt, die in href des angeklickten Artikel erwähnt wurde.

So, wenn ich $('.SomeClass').leanModal() aufrufen Es wird ein Klickereignis für alle Elemente mit der Klasse SomeClass hinzufügen und Modal öffnen, wenn einige klicken Sie darauf und zeigen Sie den Inhalt.

Also in Ihrem Fall, wenn Sie $('.modal-trigger2').leanModal() anriefen Es hat einfach ein Klick-Ereignis für alle Ihre Inhalte Schaltflächen hinzugefügt und öffnen Sie das Popup, wenn Sie auf eines davon geklickt haben. Es hat sogar keinen Ajax-Aufruf an den Server gesendet. Wie Sie zunächst wissen, gab es keinen Inhalt in modal3 Container, deshalb öffnete es leer modal.

Also was ich tat war, um diesen Aufruf zu entfernen und bewegte alle Popup-Logik in category_modal.js Also, wenn Sie auf einen Inhalt klicken, senden Sie eine Ajax-Anfrage an den Server. In JS-Ansicht mache ich das gleiche, was Sie getan haben, aber jetzt habe ich einen Wrapper rund um Ihre comments und setzen Sie die ID einzigartig je nach Ihrem Wunsch content_id. Danach rufe ich auf diesem neu erstellten Wrapper div. Und lösen Sie das Ereignis click aus, so dass Modal automatisch angezeigt wird.

P. S

Sie müssen nicht unbedingt mit diesen dynamischen Code folgenden ID Sachen müssen auch arbeiten.

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

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.