Question

因此，我从几个在线教程中的Rails应用程序中整理了一个评论部分。一切正常，除了我发表评论时，除非重新加载页面，否则该评论不会显示。我正在使用acts_as_commentable_with_threading宝石。

这是我的评论控制器：

class CommentsController < ApplicationController
  before_action :authenticate_user!
  def create
    commentable = commentable_type.constantize.find(commentable_id)
    @comment = Comment.build_from(commentable, current_user.id, body)


    if @comment.save
      make_child_comment
      redirect_back fallback_location: root_path, :notice => 'Comment was successfully added.'
    else
      render :action => "new"
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:body, :commentable_id, :commentable_type, :comment_id)
  end

  def commentable_type
    comment_params[:commentable_type]
  end

  def commentable_id
    comment_params[:commentable_id]
  end

  def comment_id
    comment_params[:comment_id]
  end

  def body
    comment_params[:body]
  end

  def make_child_comment
    return "" if comment_id.blank?

    parent_comment = Comment.find comment_id
    @comment.move_to_child_of(parent_comment)
  end
end

这是我的视图文件。 _form部分：

.comment-form
  = simple_form_for @new_comment, :remote => true do |f|
    = f.input :commentable_id, :as => :hidden, :value => @new_comment.commentable_id
    = f.input :commentable_type, :as => :hidden, :value => @new_comment.commentable_type
    .field.form-group
      = f.input :body, :input_html => { :rows => "2" }, :label => false
    .field.form-group
      = f.button :submit, :class => "btn btn-primary", :disable_with => "Submitting…"

_reply.html.haml

- comments.each do |comment|
  .comments-show
    .comment
      .media.mb-4
        .d-flex.mr-3

          .float-left.image
            - if comment.user.profile_image.present?
              .review-img
                = image_tag attachment_url(comment.user, :profile_image, :fit, 50, 50,  format: "jpg")
            - else
              %img.review-img{:alt => "user profile image", :src => "https://img.icons8.com/bubbles/100/000000/user.png"}/
        .media-body
          .small
            %b
              - if comment.user.username.present?
                {comment.user.username}
              - else
                {comment.user.full_name}
          .small.text-muted
            {time_ago_in_words(comment.created_at)} ago
          .small
            {content_tag(:div, comment.body, style: "white-space: pre-wrap;")}
            %br
          .comment-nav
            %a.comment-reply{:href => "#/", class: "btn btn-sm btn-link"} reply
          .reply-form
            = simple_form_for @new_comment do |f|
              = f.hidden_field :commentable_id, value: @new_comment.commentable_id
              = f.hidden_field :commentable_type, value: @new_comment.commentable_type
              = f.hidden_field :comment_id, value: comment.id
              .field.form-group
                = f.text_area :body, class: 'form-control'
              .field.form-group{:style => "margin-bottom: 60px"}
                = submit_tag "Post Reply", class: 'btn btn-primary', style: "float: right;"
      %div{:style => "margin-left: 100px;"}
        = render partial: "comments/reply", locals: {comments: comment.children}

_template.html.haml

.card.my-2
  .scrollable
    .card-body
      %b
        #{pluralize(commentable.comment_threads.count, "Comment")}
      %hr

      = render :partial => 'comments/form', :locals => { new_comment: new_comment }
      = render partial: 'comments/reply', locals: {comments: commentable.root_comments}

comments.js.coffee

$ ->
  $('.comment-reply').click ->
    $(this).closest('.comment').find('.reply-form').toggle()
    return


jQuery ->
  $(".comment-form")
    .on "ajax:beforeSend", (evt, xhr, settings) ->
      $(this).find('textarea')
        .addClass('uneditable-input')
        .attr('disabled', 'disabled');
    .on "ajax:success", (evt, data, status, xhr) ->
      $(this).find('textarea')
        .removeClass('uneditable-input')
        .removeAttr('disabled', 'disabled')
        .val('');
      $(xhr.responseText).hide().insertAfter($(this)).show('slow')

Answer 1

$(xhr.responseText).hide().insertAfter($(this))

之后添加一个内联样式为“ display：none”的包含xhr.responseText的div，并且完全不返回任何jquery句柄。

$(xhr.responseText).hide().insertAfter($(this)).length
> 0

因此选择新的div作为表单元素的同级元素，并投射show（'slow'）

$(this).siblings('div').show('slow')

评论javascript无法正常工作。仅在页面重新加载后更新

1 个答案: