Jquery.html showing literal code instead of rendering html in application.js

Question

I implement the following code in my rails application.js file. When the user clicks on the link, the view reloads with a complete list of reviewers instead of the first 4:

$(document).ready(function(){
    $("#more_reviewers").click(function(e){
        $("#reviewer_list").html('<%= escape_javascript(render "restaurants/restaurant_reviewer_list", :venue => @restaurant, :limit => @restaurant.reviews.count) %>');
    });
});

Problem: instead of showing me the list, the code returns the Rails code as text. So on my screen, instead of seeing a list of users, I see:

'<%= escape_javascript(render "restaurants/restaurant_reviewer_list", :venue => @restaurant, :limit => @restaurant.reviews.count) %>'

This is probably going to be a simple one - and I'll appreciate it.

Thomas Clayson · Accepted Answer · 2013-03-21 08:57:45Z

6

Rails is a server side programming language. Javascript is client side. You can't dynamically place ruby code into your website client side, as it needs to get run on the server first.

You'll have to create a rails script which runs this line

<%= escape_javascript(render "restaurants/restaurant_reviewer_list", :venue => @restaurant, :limit => @restaurant.reviews.count) %>

and then load it into your element by using load() e.g.:

$(document).ready(function(){
    $("#more_reviewers").click(function(e){
        $("#reviewer_list").load('http://url.to/the/script/you/made');
    });
});

That way the server gets sent a request for your script, it runs the script (server side) and delivers the output (html) to the javascript (client side) where it can be rendered.

answered Mar 21, 2013 at 8:57

Thomas Clayson

29.9k26 gold badges153 silver badges226 bronze badges

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

3 Comments

Laurent Over a year ago

Thanks a lot Thomas, that is very clear. This solution sounds cumbersom and resource-heavy. What would you advise is best? I can rework some code to meet criteria of speed of delivery to the user and simplicity. Your advice will be very appreciated.

Thomas Clayson Over a year ago

Mischa suggests another way to do this. I think that the way I've suggested is best in certain cases because if the output updates when you're on the page you'll always get the latest version (because you're loading it in real time - rather than just once at the start of the page loading), but Mischa's is also perfectly valid if you don't want to create another script.

Laurent Over a year ago

Thomas I really appreciate the help. I upvoted Mischa because I implemented his solution - it's OK for the script not to get updated since the number of reviewers doesn't change significantly over one page view. Thank you!

Mischa · Accepted Answer · 2013-03-21 09:09:03Z

2

In addition to Thomas' explanation about client-side and server-side and assuming you don't have to make another request to the server: the easiest would be to just put the partial in a hidden div in your view and then use jQuery to display it.

show.html.erb:

<div style="display:none;" id="hidden_div">
  <%= render "restaurants/restaurant_reviewer_list", :venue => @restaurant, :limit => @restaurant.reviews.count %>
</div>

application.js:

$(document).ready(function(){
  $("#more_reviewers").click(function(e){
    $("#hidden_div").show();
  });
});

edited Mar 21, 2013 at 9:09

answered Mar 21, 2013 at 9:03

Mischa

43.4k9 gold badges101 silver badges111 bronze badges

1 Comment

Laurent Over a year ago

Hey Mischa, I voted for you because you followed up - really appreciate your help across both of my related posts- and gave me a great solution. Thanks!

Collectives™ on Stack Overflow

Jquery.html showing literal code instead of rendering html in application.js

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related