Raw/1 rendering unwanted content in between body tags

Phoenix Forum Questions / Help
1

I’m experiencing a very strange behavior in my application right now. I have a layout that renders several different snippets of html within it. Here is the layout file:

<!DOCTYPE html>
<html lang="en" ng-app="crossroads">
  <head>
    <%= render CrossroadsInterface.SharedView, "common_head.html", assigns %>
    <%= render_existing @view_module, "head.html", assigns %>
  </head>
  <body>
    <%= render @view_module, @view_template, assigns %>
    <%= render CrossroadsInterface.SharedView, "common_body.html", assigns %>
    <%= render_existing @view_module, "body.html", assigns %>
  </body>
</html>

In the common_head.html file, I’ve got the following line:

<%= raw(render(MyApplication.SharedView, "cr.svg", assigns)) %>

When this line is present in my code, I get the following strange behavior; content from the head.html file gets ripped out from being in between my <head></head> tags and gets dumped into the document immediately following the <body> tag. When I remove the line:

<%= raw(render(MyApplication.SharedView, "cr.svg", assigns)) %>

then head.html contents get rendered between the <head></head> tags as expected. I get the exact same behavior when I replace the contents of

<%= raw(render(MyApplication.SharedView, "cr.svg", assigns)) %>

with

<%= raw("<div id="foobar">My foobar</div>) %>

It appears that raw/1 has some unexpected side effects. Does anyone have any ideas as to why raw/1 would create this kind of behavior in my application? Thanks in advance to anyone who can offer up any ideas.

2

That is because elements like div's and svg's are not allowed in the document head, it is not Phoenix’s raw moving them around, it is the web browser moving the elements once loaded, you need to follow the html spec. :slight_smile:

EDIT: Notice the output text is as you expect, but if you load that text in the browser the browser shuffles around the DOM to get things where they belong. Also you should mention that you are seeing it move in the DOM and not the text, those are very different use-cases and would confuse many people. ^.^

1 Like
3

Thank you!

Clearly I glossed over my basic HTML education. Nice to know that now. It worked and I was able to get things working correctly!

1 Like
4

HTML is a horrible horrible horrible over-engineered thing, this is only the tip of the iceberg. ^.^;