Rails AJAX评论明确textarea

时间:2015-12-06 10:40:40

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

我在我的网络应用程序中添加了AJAX注释,但我不知道如何在添加注释后使textarea(我在哪里写评论)清楚。另外,我在使用AJAX时很难显示错误。

我的评论控制员:

  def create
    @user = User.find(params[:user_id])
    @guide = Guide.find(params[:guide_id])
    @comment = @guide.comments.build(comment_params)
    if @comment.valid?
      @comment.user = current_user
      @comment.save
      respond_to do |format|
        format.html {
          flash[:notice] = "Comment added!"
          redirect_to :back
        }
        format.js
      end
    else
        flash[:danger] = "Comment must be 4 to 200 letters long"
        redirect_to :back
      end
    end
  end

JS文件(create.js.erb):

$(".comments").html("<%= escape_javascript(render @guide.comments) %>);

查看(指南/ show.html.erb):

    ...
     <div class="add_comment">
        <%= form_for [@user, @guide, Comment.new], remote: true  do |f| %>
          <p>
            <%= f.text_area :body %>
          </p>
          <p><%= f.submit "Add comment" %></p>
        <% end %>
      </div>
      <div class="comments">
        <%= render @guide.comments %>
      </div>

我的评论部分(_comment.html.erb):

<%= div_for comment do %>
  <div id="comment">
    <%= link_to image_tag(comment.user.avatar(:small)), comment.user %>
    <small><%= link_to " #{comment.user.username }", comment.user %> <%= time_ago_in_words(comment.created_at) %> ago.
    <% if comment.user == current_user || current_user.admin? %>
      <%= link_to "Delete", user_guide_comment_path(comment.user, comment.guide, comment), method: :delete, data: { confirm: "Are you sure?"} %>
    <% end %>
    </small>
    <br/>
    <span><%= comment.body %></span>
  </div>
<% end %>

要清除 - 我希望在点击提交并添加评论之后添加新评论“AJAX TEST COMMENT”来清除自己的区域,此外任何sugestions如何用AJAX显示错误将不胜感激。 enter image description here

编辑:是的 - 代码确实添加了新评论,并通过ajax呈现所有评论而不刷新整个页面。

Started POST "/users/1/guides/103/comments" for 127.0.0.1 at 2015-12-06 11:59:53 +0100
Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"body"=>"AJAX ANOTHER TEST COMMENT - IT IS WORKING"}, "commit"=>"Add comment", "user_id"=>"1", "guide_id"=>"103"}
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  Guide Load (0.1ms)  SELECT  "guides".* FROM "guides" WHERE "guides"."id" = ? LIMIT 1  [["id", 103]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ?  ORDER BY "users"."id" ASC LIMIT 1  [["id", 1]]
   (0.1ms)  begin transaction
  SQL (0.2ms)  INSERT INTO "comments" ("body", "guide_id", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?)  [["body", "AJAX ANOTHER TEST COMMENT - IT IS WORKING"], ["guide_id", 103], ["user_id", 1], ["created_at", "2015-12-06 10:59:53.334245"], ["updated_at", "2015-12-06 10:59:53.334245"]]
   (42.3ms)  commit transaction
  Comment Load (0.1ms)  SELECT "comments".* FROM "comments" WHERE "comments"."guide_id" = ?  ORDER BY "comments"."created_at" DESC  [["guide_id", 103]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 2]]
  User Load (0.1ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 4]]
  CACHE (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  CACHE (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 4]]
  CACHE (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  CACHE (0.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", 1]]
  Rendered comments/_comment.html.erb (13.8ms)
  Rendered comments/create.js.erb (15.8ms)
Completed 200 OK in 65ms (Views: 17.1ms | ActiveRecord: 43.3ms)

2 个答案:

答案 0 :(得分:1)

在控制器中重构您的create方法,如下所示:

  def create
    @user = User.find(params[:user_id])
    @guide = Guide.find(params[:guide_id])
    @comment = @guide.comments.build(comment_params)
    @comment.user = current_user
    @comment.save
    respond_to do |format|
      format.html {
        flash[:notice] = "Comment added!"
        redirect_to :back
      }
      format.js
    end
  end

此处,控制器中未处理错误,我们将继续在create.js.erb文件中执行此操作,并按如下方式显示闪存:

$(".comments").html("<%= escape_javascript(render @guide.comments) %>");
$('#comment_body').val('');
<% if @comment.errors.empty? %>
  $("#notice").html("Comment was successfully posted.");
<% else %>
  $("#notice").html("Error! Comment not posted.");
<% end %>

这假设您在页面上有#notice div - (这通常出现在每个rails应用页面上,因为它来自application.html.erb

可以使用相同的方法将@comment中的错误附加到create.js.erb

页面中

答案 1 :(得分:0)

我设法通过简单地添加:

来清除textarea
$(".comments").html("<%= escape_javascript(render @guide.comments) %>");
$('#comment_body').val('');

现在只剩下第二个问题了 - 如何通过ajax显示错误,flash [消息]等?我认为值得一提的是我有部分错误消息(_error_messages.html.erb):

<% if object.errors.any? %>
  <div id="error_explanation">
    <div class="alert">
      The form contains <%= pluralize(object.errors.count, "error") %>.
    </div>
    <ul>
    <% object.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
<% end %>