Javascript 轨道5+；Ajax：仅当注释存在时才追加注释

我正在尝试创建一个功能，用户可以使用Ajax在文章上创建评论。但是，我不明白为什么只有一条注释存在时，才能通过ajax成功呈现该注释。注释将提交到数据库，而不进行任何回滚

如果我重新加载页面并创建第二条注释，只有这样新注释才会被追加

Started POST "/articles/veniam-ipsum-eos-quas-aut-rerum-consequatur-at-velit-perferendis-odio/comments" for 103.252.202.198 at 2017-11-03 16:50:14 +0000
Processing by CommentsController#create as JS
  Parameters: {"utf8"=>"✓", "comment"=>{"content"=>"comment only appended if a comment exists"}, "commit"=>"Add Comment", "article_id"=>"veniam-ipsum-eos-quas-aut-rerum-consequatur-at-velit-perferendis-odio"}
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Article Load (0.6ms)  SELECT  "articles".* FROM "articles" WHERE "articles"."slug" = $1 LIMIT $2  [["slug", "veniam-ipsum-eos-quas-aut-rerum-consequatur-at-velit-perferendis-odio"], ["LIMIT", 1]]
   (0.2ms)  BEGIN
  SQL (0.6ms)  INSERT INTO "comments" ("content", "article_id", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["content", "comment only appended if a comment exists"], ["article_id", 189], ["user_id", 1], ["created_at", "2017-11-03 16:50:14.291049"], ["updated_at", "2017-11-03 16:50:14.291049"]]
   (2.5ms)  COMMIT

评论控制器

class CommentsController < ApplicationController
  before_action :authenticate_user!
  before_action :set_article

  def create
    @comment = @article.comments.build(comment_params)
    @comment.user = current_user
      if @comment.save
        respond_to do |format|
          format.html do 
            flash[:success] = "Your comment was created successfully"
            redirect_to @comment.article
          end
            format.js
        end
        unless @comment.article.user == current_user
          Notification.create!(recipient: @article.user, actor: current_user, action: "posted", notifiable: @comment)
        end
      else
       respond_to do |format|
          format.html { redirect_to @comment.article, flash[:error] = "Unable to submit comment."}
        end
      end
  end

  private

    def set_article
      @article = Article.friendly.find(params[:article_id])
    end

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

end

  def show
      @comments = @article.comments.order("created_at DESC")
      @new_comment = @article.comments.new
  end

articles/show.html.erb

  <%= render 'comments/comment_form' %>
  <% if @comments.exists? %>
    <div id= "comment" >
      <%= render @comments %>
    </div>
  <% else %>
    <div class ="no-comments">
      <p> There are no comments yet.</p>
    </div>
  <% end %>

  <%= form_for [@article, @new_comment], remote: true do |f| %>
    <div class="form-group">
      <div class = "row">
        <div class= "col-md-9 col-sm-9 col-xs-12">
          <%= f.text_area :content, rows: 2, placeholder: "Write your comment...", class: 'form-control' %>
        </div>
        <div class= "col-md-3 col-sm-3 col-xs-12">
          <%= f.submit 'Add Comment', class: 'btn btn-md btn-default' %>
        </div>
      </div>
    </div>
  <% end %>

<%= comment.content %>

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

  <div id="comment-form">
    <%= render 'comments/comment_form' %>
  </div>
  <div id = "comment-list" >
    <% if @comments.exists? %>
        <%= render @comments %>
    <% else %>
        <div id = "no-comments">
          <p> There are no comments yet.</p>
        </div>
    <% end %>
  </div>

$('#comment-list').append("<%= escape_javascript (render partial: @comment) %>");
$('#no-comments p').html('');

解决方案：

  resources :articles do
    resources :comments
  end

用户PlanB在下面给出了一个可行的解决方案，但我对答案做了一些调整，使得

还没有评论。

在提交评论表单后被删除

articles/show.html.erb

  <%= render 'comments/comment_form' %>
  <% if @comments.exists? %>
    <div id= "comment" >
      <%= render @comments %>
    </div>
  <% else %>
    <div class ="no-comments">
      <p> There are no comments yet.</p>
    </div>
  <% end %>

  <%= form_for [@article, @new_comment], remote: true do |f| %>
    <div class="form-group">
      <div class = "row">
        <div class= "col-md-9 col-sm-9 col-xs-12">
          <%= f.text_area :content, rows: 2, placeholder: "Write your comment...", class: 'form-control' %>
        </div>
        <div class= "col-md-3 col-sm-3 col-xs-12">
          <%= f.submit 'Add Comment', class: 'btn btn-md btn-default' %>
        </div>
      </div>
    </div>
  <% end %>

<%= comment.content %>

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

  <div id="comment-form">
    <%= render 'comments/comment_form' %>
  </div>
  <div id = "comment-list" >
    <% if @comments.exists? %>
        <%= render @comments %>
    <% else %>
        <div id = "no-comments">
          <p> There are no comments yet.</p>
        </div>
    <% end %>
  </div>

$('#comment-list').append("<%= escape_javascript (render partial: @comment) %>");
$('#no-comments p').html('');

目前还没有评论

评论/create.js.erb

  <%= render 'comments/comment_form' %>
  <% if @comments.exists? %>
    <div id= "comment" >
      <%= render @comments %>
    </div>
  <% else %>
    <div class ="no-comments">
      <p> There are no comments yet.</p>
    </div>
  <% end %>

  <%= form_for [@article, @new_comment], remote: true do |f| %>
    <div class="form-group">
      <div class = "row">
        <div class= "col-md-9 col-sm-9 col-xs-12">
          <%= f.text_area :content, rows: 2, placeholder: "Write your comment...", class: 'form-control' %>
        </div>
        <div class= "col-md-3 col-sm-3 col-xs-12">
          <%= f.submit 'Add Comment', class: 'btn btn-md btn-default' %>
        </div>
      </div>
    </div>
  <% end %>

<%= comment.content %>

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

  <div id="comment-form">
    <%= render 'comments/comment_form' %>
  </div>
  <div id = "comment-list" >
    <% if @comments.exists? %>
        <%= render @comments %>
    <% else %>
        <div id = "no-comments">
          <p> There are no comments yet.</p>
        </div>
    <% end %>
  </div>

$('#comment-list').append("<%= escape_javascript (render partial: @comment) %>");
$('#no-comments p').html('');

$（“#注释列表”）。追加（“”）；
$（'#无注释p'）.html（''）；

尝试以下方法：

  <%= render 'comments/comment_form' %>
  <% if @comments.exists? %>
    <div class= "comment" >
      <%= render @comments %>
    </div>
  <% else %>
    <div class= "comment">
      <p> There are no comments yet.</p>
    </div>
  <% end %>

目前还没有评论

以及：

$（'.comment'）。追加（“”）；

因为如果现在有注释，您的

if

语句不会创建

div#comment

，所以

---

$（'#comment'）。附加（“”）

无法向

#comment

添加任何内容，因为它在HTML中不存在。

我认为问题在于您的创建方法。由于您已重定向到

@comment.article

，无法再访问create.js.erb。尝试按如下方式重写create方法：

def create
  @comment = @article.comments.build(comment_params)
  @comment.user = current_user
  if @comment.save
    respond_to do |format|
      format.html do 
        flash[:success] = "Your comment was created successfully"
      end
      format.js
    end
    unless @comment.article.user == current_user
      Notification.create!(recipient: @article.user, actor: current_user, action: "posted", notifiable: @comment)
    end
  else
    respond_to do |format|
      format.html { redirect_to @comment.article, flash[:error] = "Unable to submit comment."}
    end
  end
end