質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

非同期通信のコメントが二重で表示される

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 122

K-kit

score 0

前提・実現したいこと

初心者です
既存のアプリを模倣しながら作成をしています
非同期通信でコメントをすると二重で表示されるのを解消したいです。

開発環境

rails_6.0.0_
ruby 2.6.5

発生している問題

非同期通信でコメントをすると二重で表示されます。
コードの確認をお願いいたします
イメージ説明

該当のソースコード

post.html.erb

  <div class="col-md-8 col-md-2 mx-auto">
    <div class="card-wrap">
      <div class="card">
        <div class="card-header align-items-center d-flex">
          <%= link_to user_path(post.user), class: "no-text-decoration" do %>
            <%= image_tag avatar_url(post.user), class: "post-profile-icon" %>
          <% end %>
          <%= link_to user_path(post.user), class: "black-color no-text-decoration",
            title: post.user.name do %>
            <strong><%= post.user.username %></strong>
          <% end %>

          <% if post.user_id == current_user.id %>
            <%= link_to post_path(post), method: :delete, class: "ml-auto mx-0 my-auto" do %>
              <i class="fas fa-trash-alt fa-lg" style="user-select: auto;"></i>
            <% end %>

            <%= link_to edit_post_path(post.id), method: :get do %>
              <i class="fas fa-edit fa-lg" style="user-select: auto;"></i>
            <% end %>

          <% end %>
        </div>

        <%= link_to(post_path(post)) do %>
          <%= image_tag post.photos.first.image.url(:medium), class: "card-img-top" %>
        <% end %>

        <div class="card-body">
          <div class="row parts">

            <div id="like-icon-post-<%= post.id.to_s %>">
              <% if post.liked_by(current_user).present? %>
                <%= link_to "いいねを取り消す", post_like_path(post.id, post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
              <% else %>
                <%= link_to "いいね", post_likes_path(post), method: :POST, remote: true, class: "love hide-text" %>
              <% end %>
              <%= @likes_count %>
            </div>

            <%= link_to "", "#", class: "comment" %>
          </div>

          <div id="like-text-post-<%= post.id.to_s %>">
            <%= render "like_text", { likes: post.likes } %>
          </div>

          <div>
            <span><strong><%= post.user.username %></strong></span>
            <span><%= (post.title) %></span>
            <span><%= simple_format(post.content) %></span>
            <%if post.link != nil %>
              <span><%= link_to "商品リンク",(post.link) %></span>
              <% else %>
              商品リンクはありません
            <% end %>
            <%= link_to time_ago_in_words(post.created_at).upcase + "前", post_path(post), class: "post-time no-text-decoration" %>
            <div id="comment-post-<%= post.id.to_s %>">
              <%= render 'comment_list', { post: post } %>
            </div>
            <%= link_to time_ago_in_words(post.created_at).upcase + "前", post_path(post),
              class: "light-color post-time no-text-decoration" %>
            <hr>
            <div class="row actions" id="comment-form-post-<%= post.id.to_s %>">
              <%= form_with model: [post, Comment.new], class: "w-100" do |f| %>
                <%= f.hidden_field :user_id, value: current_user.id %>
                <%= f.hidden_field :post_id, value: post.id %>
                <%= f.text_field :comment, class: "form-control comment-input border-0", placeholder: "コメント ...", autocomplete: :off %>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
コード

該当のソースコード

_comment_list.html.erb

  <div class="mb-2">
    <% if comment.user == current_user %>
      <%= link_to "", post_comment_path(post.id, comment), method: :delete, remote: true, class: "delete-comment" %>
    <% end %>
    <span>
      <strong>
        <%= link_to comment.user.username, user_path(comment.user), class: "no-text-decoration black-color" %>
      </strong>
    </span>
    <span><%= comment.comment %></span>
  </div>
<% end %>
コード

該当のソースコード

create.js.erb

  html('<%= j render "posts/comment_list", { post: @post } %>');
$('#comment-form-post-<%= @post.id.to_s %> #comment_comment').val("");
コード

該当のソースコード

posts.controller.rb

  before_action :authenticate_user!
  before_action :set_post, only: %i(show destroy edit update) 

  def new
    @post = Post.new
    @post.photos.build
  end

  def create
    @post = Post.new(post_params)
    if @post.photos.present?
      @post.save
      redirect_to root_path
      flash[:notice] = "投稿が保存されました"
    else
      redirect_to root_path
      flash[:alert] = "投稿に失敗しました"
    end
  end

  def index
    @posts = Post.includes(:photos, :user).order('created_at DESC')
    @likes_count = Like.where(post_id: @posts).count
  end

  def show
    @likes_count = Like.where(post_id: @post.id).count
  end

  def destroy
    if @post.user == current_user
      flash[:notice] = "投稿が削除されました" if @post.destroy
    else
      flash[:alert] = "投稿の削除に失敗しました"
    end
    redirect_to root_path
  end

  def edit
  end

  def update
    if @post.update(post_params)
      redirect_to root_path
      flash[:notice] = "投稿が保存されました"
    else
      redirect_to edit_post_path
      flash[:alert] = "投稿に失敗しました"
    end
  end

  private
    def post_params
      params.require(:post).permit(:title, :link, :content, photos_attributes: [:image]).merge(user_id: current_user.id)
    end

    def set_post
      @post = Post.find_by(id: params[:id])
    end
end
コード

該当のソースコード

comments.controller.rb

  before_action :authenticate_user!

  def create
    @comment = Comment.new(comment_params)
    @post = @comment.post
    if @comment.save
      respond_to :js
    else
      flash[:alert] = "コメントに失敗しました"
    end
  end

  def destroy
    @comment = Comment.find_by(id: params[:id])
    @post = @comment.post
    if @comment.destroy
      respond_to :js
    else
      flash[:alert] = "コメントの削除に失敗しました"
    end
  end

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

コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る