A server-generated JavaScript response (SJR for short) is a perfectly valid way to handle simple AJAX operations within a Rails app, and there are many benefits in doing so. There is one common GOTCHA however that trips up even the most experienced Rails developer: forgetting to use escape_javascript when rendering content to the DOM.

Does this sound familiar?

$("#posts-list").html("<%= render(@posts) %>");

Have you ever written a create.js.erb SJR template like the one above and found that when you tested it in your app nothing happened? If so, then you have experienced this pain.

Even after a couple run-ins with this issue, perhaps you still aren’t exactly sure which situations require escape_javascript and which don’t.

And what the heck is the difference between escape_javascript and j? Are these interchangeable?

What does escape_javascript do?

From the Rails documentation,

Escapes carriage returns and single and double quotes for JavaScript segments.

All we are doing is taking a string of text and making sure that it doesn’t contain any invalid characters when the browser tries to parse it. Simple!

For a more in-depth discussion, read here.

To escape or not to escape

Now that you know what escape_javascript does, the next question is when to use it.

Here’s a short answer: always :)

More specifically, any time you are trying to render HTML as a string and insert it into the DOM you’ll want to escape it first.

Some common examples include

// rendering a collection of records as a partial
$("#comments").html("<%= escape_javascript render(@comments) %>");

// rendering a single record as a partial
$("#comments").append("<%= escape_javascript render(@comment) %>");

// rendering a single bit of text from a record's attribute
$("#post-title").html("<%= escape_javascript @post.title) %>");

Not every situation requires escape_javascript, e.g.

// Not required here
if (<%= @record.valid? %>) {
  // ...
}

however you’ll find yourself getting into trouble more often by forgetting to escape as opposed to escaping unnecessarily.

What’s the deal with j?

You may have seen j being used in some code samples.

The j method is nothing more than an alias for escape_javascript. It’s a shortcut to save space and make the code more readable.

// This...
$("#comments").html("<%= j render(@comments) %>");
// is equivalent to...
$("#comments").html("<%= escape_javascript render(@comments) %>");

Now you know

SJR templates are a great tool to have in your Rails arsenal, and by learning how and when to use escape_javascript (or j) within those templates, you will save yourself hours of headaches debugging an unresponsive template.