Dynamically Render HTML stored in Model

Question

I want to take some Rails models passed into a view and render them.

e.g.

In the controller

@stories = Story.all

In the view

$('.story-text').html("#{raw @stories[0].story_text}");

But the HTML string contains " and '. The HTML is thus not contained entirely in a string and the Javascript fails to run.

e.g. it becomes

$('.story-text').html("<img src="/example.jpg" />");

Which causes an error.

How can I accomplish this? Is there triple quotes like in Python that I can use in Javascript?

EDIT Example of @stories[0].story_text

<p>This is some example text</p><img src="/example.jpg" />

It is stored in the database as a text type

Please post your controller code to show how Story.all is populated. — Bishnu Paudel, Jan 22 '14 at 04:40
Story.all is populated through a form using CKEditor. The controller is literally only doing `@stories = Story.all` I added an example — Michael Johnston, Jan 22 '14 at 06:01

matt · Accepted Answer · 2014-01-23T15:30:31.763

1

Rather than raw, use escape_javascript to escape your string suitably for embedding in javascript. It is aliased to j, so this in your Haml view:

$('.story-text').html("#{j @stories[0].story_text}");

results in this javascript being generated:

$('.story-text').html("<p>This is some example text<\/p><img src=\"/example.jpg\" />");

edited Jan 23 '14 at 15:30

answered Jan 22 '14 at 12:27

matt

78,533
8
163
197

score 0 · Answer 2 · answered Jan 22 '14 at 05:10

0

You are looking for HTMLEntities

answered Jan 22 '14 at 05:10

Raj

22,346
14
99
142

I don't quite understand how this would work? I would encode/escape the HTML in my controller and decode it with Javascript in my view? Wouldn't I face the same problem with the quotation marks when decoding? Could you add an example relating to my problem? – Michael Johnston Jan 22 '14 at 06:05
why are you doing the output in Javascript? It should be in view script – Raj Jan 22 '14 at 06:06
Can you dynamically insert HTML with view script? I want to click a link and have the HTML inserted into an element – Michael Johnston Jan 22 '14 at 06:08
alright, I understand. Are you fetching the model data via AJAX? – Raj Jan 22 '14 at 06:17
No, they're all being passed by the controller to the view at rendering – Michael Johnston Jan 22 '14 at 08:04
view meaning view script? how is it going to the JS? – Raj Jan 22 '14 at 08:10
It's my `.html.haml` file, I'm using some Javascript there – Michael Johnston Jan 22 '14 at 09:23
can you try this? http://stackoverflow.com/questions/4699497/disable-html-escaping-in-erb-templates – Raj Jan 22 '14 at 10:49

Dynamically Render HTML stored in Model

2 Answers2