Rails3 + jQuery: Ajax response messed up

时间:2022-10-08 23:30:36

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.

我正在尝试与Rails 3相处,并使用jQuery对我的应用程序进行一些Ajax化。因此,当用户编写注释时,应在按下提交按钮后通过Ajax插入注释。

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.

问题是:Ajax响应包含我的application.haml的整个生成的html。我不知道如何摆脱这个HTML,只得到相关的create.js.erb文件中写的预期响应。

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:

用于评论的表单(在HAML中)看起来像这样:

  #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:

我的create.js.erb文件放在views / comments中:

$('#article_comments').append('<%= escape_javascript(render(@comment)) %>');

The comment partial (views/comments/_comment.haml), that should be appended looks like this:

应该附加的注释partial(views / comments / _comment.haml)如下所示:

.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:

最后,点击提交后发送的ajax帖子是:

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)

我正在通过网站的html代码获得这种响应:(缩短div的内容以减少分心)

<!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!

注释不会附加到div(但会写入数据库)。那么,我该如何解决这个问题呢?谢谢你的期待!

1 个解决方案

#1


0  

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:

好的,谢谢你,我找到了解决方案。在评论控制器中,我不得不将以下哈希添加到format.js以防止在响应中呈现布局:

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

#1


0  

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:

好的,谢谢你,我找到了解决方案。在评论控制器中,我不得不将以下哈希添加到format.js以防止在响应中呈现布局:

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