Question

我正在学习Rails，并且正在尝试将AJAX实现到我的示例应用程序中。我正在关注这个Railscast并且我认为我正在做它所说的一切，但它不起作用，我似乎无法弄清楚原因。

我有remote: true。
我有respond_to块，我回复js格式。
如果格式为create.js.erb，则呈现js。

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

comments_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_comments.html.erb

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

Answer 1

试试这个：

comments_controller 上的

：

f.js { @comments = Comment.all }

create.js.erb ：

上的

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

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

1 个答案: