Rails Displaying HTML as Text Using Bootstrap Popover

Question

I am iterating over my users and adding them to a Table in my view. I would like one of the columns to be a checkbox to 'Flag' a user.

Ideally, clicking this checkbox displays a Bootstrap Popover with a form to explain the reason for flagging.

My problem is that the form in the bootstrap popover is displaying as plaintext.

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>

I've tried adding content_type: "application/html" when calling the partial but no luck. Any help is greatly appreciated!

Image of Popover

Like you forgot set popover param `html`=true, check out this http://stackoverflow.com/questions/13202762/html-inside-twitter-bootstrap-popover — Hieu Pham, Apr 20 '16 at 17:53
That worked, thank you! Please submit as an answer so I can give you credit. — Drew Reynolds, Apr 20 '16 at 17:57

score 2 · Accepted Answer · answered Apr 21 '16 at 01:47

Bootstrap popover allows us to set the params html=true and then it will work as your expectation.

Your view

<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>

Your javascript

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

This worked, but I left `data-html="true"` right on the span, no need for the JS. — Drew Reynolds, Apr 22 '16 at 18:02

score 0 · Answer 2 · answered Feb 07 '17 at 17:49

I had issues get embedded ruby to display html_safe in a popover, in particular the link_to helper, as well and found a different solution using 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;
    }
});

Rails Displaying HTML as Text Using Bootstrap Popover

2 Answers2