Rendering partial in bootstrap popover rails 5 app?

Question

I'm having a problem rendering a partial in a bootstrap popover in my rails app.

The partial is always rendered as a plain text( showing all the HTML tags etc).

this is the code from the index.html.erb

<span class="has-popover"
      style="cursor:pointer;"
      data-toggle="popover"
      data-trigger="hover"
      data-container="body"
      data-placement="right"
      title="Lorem Ipsum"
      data-content= "<%= render :partial => 'envs/e1' %>" >
      <i class="fa fa-question-circle "  aria-hidden="true"></i>
</span>

In the app.js I have this snippet

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

and this is the _e1.html.erb partial in the envs folder

<h2>Mauris euismod sollicitudin?</h2>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

<br>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

I have wrapped "<%= render :partial => 'envs/e1' %>" this line in both raw() and html_safe without any luck.

* ADDED EXAMPLES * below are examples on how I've been using html_safeand raw in the snipped

data-content= raw("<%= render :partial => 'envs/e1' %>") - text appears the "right" way but outsite the popover.

data-content= "<%= raw(render :partial => 'envs/e1') %>" > - text appears as plain-text

data-content= "<%= render :partial => raw('envs/e1') %>" > - text appears as plain-text

data-content= "<%= render :partial => 'envs/e1' %>".html_safe- text appears as plain-text

data-content= "<%= render :partial => 'envs/e1'.html_safe %>" - text appears as plain-text

there must be some way to have the partial styled inside the popover?? Or am I doing this all wrong?

please advise me thanks in advance.

The naming convention of partial like start with underscore e.g `_e1.html.erb` then render like this `envs/e1`. however, have you seeing any error in console or log? — fool-dev, Jun 08 '18 at 18:17
@fool-dev since the partial IS being rendered as plain-text, I don't think there is an issue with finding the partial template. — Steve H., Jun 08 '18 at 19:33
Can you modify your question to add an example of *how* you used `raw` and `html_safe`? — Steve H., Jun 08 '18 at 19:47
@SteveH. I've added examples of how I'm using `raw`and `html_safe` — codegirl, Jun 09 '18 at 12:07
Interesting. Try double (") quotes for the inner quotes as well. so: "<%= render :partial "envs/e1" %>" (That's what the example I was reading had, which I've now misplaced, sorry.) — Chris Buck, Jun 09 '18 at 18:04
@ChrisBuck thats still gives the error `/index.html.erb:54: syntax error, unexpected tSTRING_BEG, expecting ')'` — codegirl, Jun 09 '18 at 18:16
Are you using `:partial` for any specific reason? Rendering a partial can be done by using `<%= render 'envs/e1' %>`. — Jake, Jun 09 '18 at 21:25

score 3 · Answer 1 · answered Jun 09 '18 at 21:07

I believe that you have to enable data-html = "true" in your popover span. At least it worked at my machine.

So it would be written like:

<span class="has-popover"
  style="cursor:pointer;"
  data-toggle="popover"
  data-trigger="hover"
  data-html="true" <!-- This is what you have to add to the code -->
  data-container="body"
  data-placement="right"
  title="Lorem Ipsum"
  data-content= "<%= render :partial => 'envs/e1' %>" >

score 0 · Answer 2 · answered Jun 09 '18 at 21:31

By default, Bootstrap popovers don't accept html entered into them by automatically inheriting the option: data-html="false" you need to add and change it to true.

If you want to read more about what options you can pass through to bootstrap popovers, check out this section of their API and you can review what you can potentially do with it.

score 0 · Answer 3 · answered Jun 10 '18 at 08:01

Your Bootstrap markup and JS look fine, so the issue is almost certainly that your view is outputting escaped HTML rather than the markup that you need.

Your attempts with html_safe are very close and definitely on the right track, but the lack of brackets means that it's not quite doing what you think. Try this instead:

data-content="<%= render(partial: 'envs/e1').html_safe %>"

Note that the html_safe is applied to the output of render, and the outer quotes are retained in the HTML and not interpreted by Rails.

Rendering partial in bootstrap popover rails 5 app?

3 Answers3