How to render html template in javascript template in Phoenix Framework

2
votes

Let's say I have 2 files, create.js.eex and post.html.eex and I want to render the contents of the post.html.eex template inside the create.js.eex template. Something like this:

$("#something").append("<%= safe_to_string render "post.html", post: @post %>");

The example above doesn't work because I need to escape quotes and other things in the string that gets returned and I can't find a way to do it

2
elixirphoenix-framework

2 Answers

6
votes

You can use render_to_string

    Phoenix.View.render_to_string(MyApp.PageView, "index.html", foo: "bar")

Be aware that this can expose you to XSS.

4
votes

Use escape_javascript:

$("#something").append("<%= escape_javascript render("post.html", post: @post) %>");

You can render_to_string and escape that, but there doesn't seem to be much need -- and since it returns a string, it will HTML-escape all the markup.

Actually, this exact example is in the docs:

https://hexdocs.pm/phoenix_html/Phoenix.HTML.html#escape_javascript/1