Rails Anzeigen von HTML als Text mit Bootstrap-Popover

Question

Ich bin über meine Benutzer iterieren und sie zu einer Tabelle in meiner Ansicht hinzufügen. Ich möchte, dass eine der Spalten ein Kontrollkästchen zum Markieren eines Benutzers ist.

Wenn Sie auf dieses Kontrollkästchen klicken, wird im Idealfall ein Bootstrap-Popover mit einem Formular angezeigt, das den Grund für die Markierung erläutert.

Mein Problem ist, dass das Formular im Bootstrap-Popover als Klartext angezeigt wird.

index.html.erb

<span class="has-popover" 
     data-toggle="popover" 
     data-container="body" 
     data-placement="right" 
     title="Flag as Duplicate/Incorrect" 
     data-content="<%= render partial: "signers/flag", locals: {signer: signer} %>"> 
     <i class="fa fa-flag" aria-hidden="true"></i> <%= check_box_tag 'flag' %> 
</span> 

_form.html.erb

<form> 
<div class='form-group'> 
<input type='text' class='form-control' placeholder='Reason for flag...'> 
</div> 
    <button type='submit' class='btn btn-default'>Submit</button> 
</form> 

ich content_type: "application/html" habe versucht, das Hinzufügen, wenn die Teil Aufruf aber kein Glück. Jede Hilfe wird sehr geschätzt!

Image of Popover

Answer 1

Bootstrap popover ermöglicht es uns, die params html = true gesetzt und dann wird es als Ihre Erwartung zu arbeiten.

Ihre Ansicht

<span class="has-popover" 
     data-toggle="popover" 
     data-container="body" 
     data-placement="right" 
     title="Flag as Duplicate/Incorrect" 
     data-content="<%= render partial: "signers/flag", locals: {signer: signer} %>"> 
     <i class="fa fa-flag" aria-hidden="true"></i> <%= check_box_tag 'flag' %> 
</span> 

Ihr Javascript

$(".has-popover").popover({ 
    html : true 
}); 

Answer 2

Ich hatte Probleme Rubin bekommen eingebettet in einem popover anzuzeigen html_safe, die link_to Helfer insbesondere auch und fand ein andere Lösung mit Javascript:

<div id="button" data-toggle="popover" data-placement="left"> 
... 
</div> 

$("#button").popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     var content = $("#div-with-ERB-content-to-put-in-popover").html(); 
     return content; 
    } 
});