【问题标题】:rails 4 ajax edit form not firing updaterails 4 ajax编辑表单未触发更新
【发布时间】:2016-07-17 01:41:21
【问题描述】:

我正在尝试在适当的位置更新帖子上的 cmets,并且我可以让编辑表单部分正确呈现,但尝试保存什么也没做 - 没有控制台错误,服务器日志中没有错误,并且记录未保存。

edit.js.erb

$('#comment-<%= @post.id %>-<%= @comment.id %>').find('.comment-content').html("<%= j render partial: 'comments/comment_form', locals: { comment: comment, post: post } %>");

cmets/_comment_form.html.erb

<div class="comment-form col-sm-11">
          <%= form_for([post, comment], :remote => true) do |f| %>
          <%= f.text_area :content, class: "comment_content", id: "comment_content_#{post.id}" %>
      </div>

      <div class="col-sm-1">
        <%= f.submit "Save", class: "btn btn-primary btn-xs" %>
      <% end %>
</div>

update.js.erb

$('comment-form').hide();
$('#comment-<%= @post.id %>-<%= @comment.id %>').find('.comment-content').html('<%= @comment.content %>');

routes.rb

resources :users do
end

resources :posts do
  resources :comments
end


class Post < ActiveRecord::Base
  belongs_to :user
  has_many :comments, dependent: :destroy
end

class User < ActiveRecord::Base
  has_many :posts, dependent: :destroy
  has_many :comments, dependent: :destroy
end

class Comment < ActiveRecord::Base
  belongs_to :user
  belongs_to :post
end

下面是点击edit_post_comment_path链接时服务器日志中的最后一件事;当在部分编辑表单中单击保存时,实际上没有任何反应,并且 update.js.erb 中的测试警报不会触发。

Started GET "/posts/471/comments/30/edit" for 72.231.138.82 at 2016-07-17 01:25:27 +0000
Processing by CommentsController#edit as JS
  Parameters: {"post_id"=>"471", "id"=>"30"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 2]]
  RailsSettings::SettingObject Load (0.2ms)  SELECT "settings".* FROM "settings" WHERE "settings"."target_id" = ? AND "settings"."target_type" = ?  [["target_id", 2], ["target_type", "User"]]
  Post Load (0.1ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."id" = ?  ORDER BY "posts"."created_at" DESC LIMIT 1  [["id", 471]]
  Comment Load (0.2ms)  SELECT  "comments".* FROM "comments" WHERE "comments"."user_id" = ? AND "comments"."id" = ? LIMIT 1  [["user_id", 2], ["id", 30]]
  Comment Load (0.1ms)  SELECT  "comments".* FROM "comments" WHERE "comments"."id" = ? LIMIT 1  [["id", 30]]
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 2]]
  Rendered comments/_comment_form.html.erb (1.2ms)
  Rendered comments/edit.js.erb (13.8ms)
Completed 200 OK in 102ms (Views: 34.4ms | ActiveRecord: 1.7ms)

我有类似的创建、销毁和自定义操作(包括 update_attributes 方法)可以正确触发,所以我不确定为什么此表单无法提交。任何帮助表示赞赏,我对 js 很陌生。

更新评论控制器操作:

class CommentsController < ApplicationController
  before_action :set_post
  before_action :user_signed_in?, only: [:create, :destroy]
  before_action :authenticate_user!, only: [:create, :edit, :new, :destroy, :update]
  before_action :correct_user, only: [:edit, :update, :destroy]
  ...

  def edit
    @comment = Comment.find(params[:id])
    respond_to do |format|
      format.js { render 'comments/edit', locals: {comment: @comment, post: @post } }
    end
  end

  def update
    @comment = Comment.find(params[:id])
    respond_to do |format|
      format.js
    end
    if @comment.update_attributes(comment_params)
      @comment.toggle!(:edited)
      flash[:success] = "Comment edited!"
      redirect_to root_path
    else
      render 'edit'
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:content, :user_id, :post_id)
  end

  def set_post  
    @post = Post.find(params[:post_id])
  end 

  def correct_user
    @comment = current_user.comments.find_by(id: params[:id])
    redirect_to root_url if @comment.nil?
    redirect_to root_url if @comment.userlocked?
  end

end

我已经用 :method => :put 更新了编辑表单,但没有效果,感谢@Emu 的拼写错误。

【问题讨论】:

  • 你能发布你的评论控制器吗
  • 你必须在你的控制器中render js
  • @Marv-C,刚刚添加。 @uzaif,您能否解释一下如何/在 cmets 控制器中添加 render js 的位置?这是我第一次尝试使用 ajax 渲染表单。

标签: ruby-on-rails ajax ruby-on-rails-4


【解决方案1】:

当您提交编辑表单时,您应该在form 中定义方法,例如:

<%= form_for([post,comment ], :remote=>true, :method => :put) do |f| %>

另外,在update.js.erb 中,以下行缺少"." or "#"

$('.comment-form').hide();

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-08
    • 2011-12-08
    相关资源
    最近更新 更多