为什么我的 AJAX 表单不起作用？

Question

我正在学习 Rails，并正在尝试在我的示例应用中实现 AJAX。我正在关注这个Railscast，我想我正在做它所说的一切，但它不起作用，我似乎无法弄清楚为什么。

1. 我有remote: true。
2. 我有 respond_to 块，我在其中回复 js 格式。
3. 如果格式为js，我会渲染create.js.erb。

create.js.erb 中的代码没有被执行。我有一个没有出现的alert('test');。但是，如果我刷新页面，则会显示新评论。我做错了什么？

_form.html.erb

<%= simple_form_for [@article, @comment], remote: true do |f| %>
    <%= f.input :author, label: 'Name' %>
    <%= f.input :body %>
    <%= f.button :submit %>
<% end %>

cmets_controller.rb

class CommentsController < ApplicationController
    def create
        @comment = Comment.new(comment_params)
        @comment.article_id = params[:article_id]
        if @comment.save
            respond_to do |f|
                f.html { redirect_to article_path(params[:article_id]), notice: 'Comment created!' }
                f.js { render 'create.js.erb' }
            end
        else
            redirect_to article_path(params[:article_id]), warning: 'Unable to create comment.'
        end
    end

    private

        def comment_params
            params.require(:comment).permit(:author, :body)
        end
end

create.js.erb

$(document).ready(function() {
    alert('test');
    $('#comments').html("<%= j render('comments/list_comments') %>");
});

堆栈跟踪

POST http://localhost:3000/articles/2/comments 500 (Internal Server Error) jquery.js?body=1:9667
send jquery.js?body=1:9667
jQuery.extend.ajax jquery.js?body=1:9212
$.rails.rails.ajax jquery_ujs.js?body=1:81
$.rails.rails.handleRemote jquery_ujs.js?body=1:157
(anonymous function) jquery_ujs.js?body=1:364
jQuery.event.dispatch jquery.js?body=1:4625
elemData.handle

更新的堆栈跟踪最后一行略有不同

POST http://localhost:3000/articles/2/comments 500 (Internal Server Error) jquery.js?body=1:9667
send jquery.js?body=1:9667
jQuery.extend.ajax jquery.js?body=1:9212
$.rails.rails.ajax jquery_ujs.js?body=1:81
$.rails.rails.handleRemote jquery_ujs.js?body=1:157
(anonymous function) jquery_ujs.js?body=1:364
jQuery.event.dispatch jquery.js?body=1:4625
elemData.handle jquery.js?body=1:4293

Rails 控制台输出

Started POST "/articles/2/comments" for 127.0.0.1 at 2014-05-19 17:12:16 -0400
Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"author"=>"hhh", "body"=>"hhh"}, "commit"=>"Create Comment", "article_id"=>"2"}
   (0.1ms)  begin transaction
  SQL (2.0ms)  INSERT INTO "comments" ("article_id", "author", "body", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)  [["article_id", 2], ["author", "hhh"], ["body", "hhh"], ["created_at", Mon, 19 May 2014 21:12:16 UTC +00:00], ["updated_at", Mon, 19 May 2014 21:12:16 UTC +00:00]]
   (31.2ms)  commit transaction
  Rendered comments/_list_comments.html.erb (1.3ms)
  Rendered comments/create.js.erb (2.7ms)
Completed 500 Internal Server Error in 56ms

ActionView::Template::Error (undefined method `each' for nil:NilClass):
    1: <div id="comments">
    2:  <% @comments.each do |comment| %>
    3:      <hr />
    4:      <p><small><%= comment.author %></small></p>
    5:      <p><%= comment.body %></p>
  app/views/comments/_list_comments.html.erb:2:in `_app_views_comments__list_comments_html_erb__1695291160912137125_70349468259020'
  app/views/comments/create.js.erb:1:in `_app_views_comments_create_js_erb___4307677746730482839_70349467492020'
  app/controllers/comments_controller.rb:6:in `create'

_list_cmets.html.erb

<div id="comments">
    <% @comments.each do |comment| %>
        <hr />
        <p><small><%= comment.author %></small></p>
        <p><%= comment.body %></p>
    <% end %>
</div>

Answer 1

试试这个：

在您的 cmets_controller 上：

f.js { @comments = Comment.all }

在您的 create.js.erb 上：

$("#comments").html("<%= escape_javascript(render :partial => 'comments/list_comments', :locals => {:comments => @comments}) %>");