Rails3 + jQuery: Ajax response messed up
I'm trying to get along with Rails 3 and some Ajaxification of my app with jQuery. Therefore, when a user is writing a comment, the comment should be inserted via Ajax after hitting the submit button.
Problem is: The Ajax response contains the whole generated html of my application.haml. I'm having no clue, how to get rid of this html and only get the intended response written in the related create.js.erb file.
Here's my comments controller:
class CommentsController < ApplicationController
def new
@comment = Comment.new
end
def create
@article = Article.find(params[:article_id])
@comment = current_user.comments.build(params[:comment])
@comment.article_id = @article.id
respond_to do |format|
if @comment.save
format.html
format.js
else
format.html
format.js
end
end
end
end
The form (in HAML) for comments is looking like this:
#article_write_comment
%h2 Write a comment
#article_write_comment_form
%p Comments are limited to 1000 chars.
= form_for([@article, @article.comments.build], :remote => true) do |f|
.field
= f.text_area :body, :rows => 10, :cols => 50
.actions
= f.submit "Submit"
My create.js.erb file is placed in views/comments:
$('#article_comments').append('<%= escape_javascript(render(@comment)) %>');
The comment partial (views/comments/_comment.haml), that should be appended looks like this:
.comment
= gravatar_for comment.user, :size =>开发者_如何转开发 48
%p
%b
= comment.user.name
said:
= time_ago_in_words(comment.created_at)
ago
%p
= simple_format(comment.body)
Finally, the sent ajax post after hitting submit is:
authenticity_token e2rvcKyjPEx8f31U2vemxCGMfVJzxvqTO+03OCAsNkw=
comment[body] Test Test Test
commit Submit
utf8 ✓
But instead of this kind of response:
$('#article_comments').append('<%= escape_javascript(render(@comment)) %>');
I'm getting this kind of response with the html code of the site: (Shortened the content of the divs for less distraction)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='content'>
<div id='header'>
</div>
<div id='container'>
$('#article_comments').append('<div class=\'comment\'>\n <img alt=\"Alex Gieche\" class=\"gravatar\" src=\"http://gravatar.com/avatar/66d7f7aefd1f45ea810cb3f524cc1780?size=48\" />\n <p>\n <b>\n Alex Gieche\n said:\n <\/b>\n less than a minute\n ago\n <\/p>\n <p>\n <p>Test Test Test<\/p>\n <\/p>\n<\/div>\n');
</div>
<div id='sidebar'>
</div>
<div id='footer'>
</div>
</div>
</body>
</html>
The comment is not getting appended to the div (but is written to the database). So, how can I fix this? Thanks for looking!
Ok, thanks for looking, I found the solution. In the comments controller,I had to add the following hash to format.js to prevent rendering the layout in the response:
class CommentsController < ApplicationController
def new
@comment = Comment.new
end
def create
@article = Article.find(params[:article_id])
@comment = current_user.comments.build(params[:comment])
@comment.article_id = @article.id
respond_to do |format|
if @comment.save
format.html
format.js {render :layout=>false}
else
format.html
format.js {render :layout=>false}
end
end
end
end
精彩评论