Rails: how to return valid javascript from controller?

Question

A have the following action in controller:

def new_messages
    @new_msgs = Message.find(:all, order: 'id desc', limit: 12)
    respond_to do |format|
        format.js
    end
end

and javascript erb file 'new_messages.js.erb' that returns to client after new_messages action:

var data = '';
<% @new_msgs.each do |m| %>
    data += '<tr><td><%= m.user.name %></td><td><%= m.text %></td><td><%= m.created_at %></td></tr>';
<% end %>

$('#messages-table').html('');
$('#messages-table').append(data);

Here I just compose rows for new messages and try to append result to my table '#messages-table'. But there is the issue: browser gets invalid javascript from server (according to Network -> request -> Response tab in Chrome Developer Tools):

var data = '';
    data += '<tr><td>dime</td><td>cowboys from hell
</td><td>2014-01-24 15:11:36 UTC</td></tr>';

$('#messages-table').html('');
$('#messages-table').append(data);

Line break in the line #2 causes SyntaxError: Unexpected token ILLEGAL. Is it possible to return javascript as it is in my new_messages.js.erb file? How to avoid such dangerous behavior?

Why even do it like this? Do more work on the client side, it looks like you're just adding content to a div. — Dave Newton
– Dave Newton, Commented Jan 26, 2014 at 14:42

emrahbasman · Accepted Answer · 2014-01-26 14:39:10Z

1

Main advantage of js.erb files is using html templates in it. You should do something like below.

_your_partial.html.erb

<% @new_messages.each do |m| %>
<tr><td><%= m.user.name %></td><td><%= m.text %></td><td><%= m.created_at %></td></tr>
<% end %>

js.erb

$('#messages-table').html('');
$('#messages-table').append(<%=j render "your_partial" %>);

answered Jan 26, 2014 at 14:39

emrahbasman

2,01310 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vee · Accepted Answer · 2014-01-26 14:30:46Z

1

You should be using escape_javascript or it's alias j to escape carriage returns, single and double quotes for JavaScript.

So updating your new_messages.js.erb to the following should work:

var data = '';
<% @new_msgs.each do |m| %>
    data += '<%= j "<tr><td>#{m.user.name}</td><td>#{m.text}</td><td>#{m.created_at}</td></tr>" %>';
<% end %>

$('#messages-table').html(data);

You could also use only html(data) instead of html('') then append(data).

edited Jan 26, 2014 at 14:30

answered Jan 26, 2014 at 14:22

vee

38.7k7 gold badges76 silver badges80 bronze badges

Collectives™ on Stack Overflow

Rails: how to return valid javascript from controller?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related