Rendering partial in bootstrap popover rails 5 app?
Asked Answered
S

3

12

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.

Spithead answered 6/6, 2018 at 11:21 Comment(9)
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?Bicameral
@Bicameral since the partial IS being rendered as plain-text, I don't think there is an issue with finding the partial template.Sashasashay
Can you modify your question to add an example of how you used raw and html_safe?Sashasashay
@SteveH. I've added examples of how I'm using rawand html_safeSpithead
Try: data-content= "<%= render :partial 'envs/e1' %>"Gloomy
@ChrisBuck it don't work, gives syntax errorSpithead
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.)Gloomy
@ChrisBuck thats still gives the error /index.html.erb:54: syntax error, unexpected tSTRING_BEG, expecting ')'Spithead
Are you using :partial for any specific reason? Rendering a partial can be done by using <%= render 'envs/e1' %>.Sax
J
3

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' %>" >

Jewish answered 9/6, 2018 at 21:7 Comment(0)
S
0

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.

Sax answered 9/6, 2018 at 21:31 Comment(0)
P
0

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.

Pulmonary answered 10/6, 2018 at 8:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.