投稿機能にajaxを導入した途端、データが2つ保存されてしまう

Question

前提・実現したいこと

グループチャットの投稿機能を非同期通信化しているのですが、Postが2回実行され、データベースに同じレコードが2つ保存されてしまいます。
そのため、投稿直後はjbuilderで返ってきたデータが１つだけ表示されるのですが、リロードすると２つ表示されます。
post.js全てをコメントアウトすると、保存されるレコードは1つになるので、ajaxの記述に問題があると思うのですが、解決できていません。
お分かりになる方、ご教示いただけないでしょうか。
（画像複数投稿を実装中のため、コントローラーが見辛くて申し訳ございません。）

発生している問題

当然ながらCOMMITも2回実行されています。

#terminalログ
Started POST "/groups/1/posts" for ::1 at 2020-05-15 14:56:16 +0900
Processing by PostsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"aDzWViLa+JFs9B/VOPE05S8GFVukjGXVaMHKQwsDJr4CX+OX2Ce7j4sPhHLcxNe6SF9K9OdCF4Z76gW7uB+HPQ==", "post"=>{"content"=>"fけおうぃあ"}, "group_id"=>"1"}
        ###2つめのStarted Post!!
Started POST "/groups/1/posts" for ::1 at 2020-05-15 14:56:16 +0900
  User Load (1.0ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ /Users/miyu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.2.4.2/lib/active_record/log_subscriber.rb:98
  Group Load (0.3ms)  SELECT  `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1
  ↳ app/controllers/posts_controller.rb:42
   (1.2ms)  SET NAMES utf8,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483
   (0.2ms)  BEGIN
  ↳ /Users/miyu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.2.4.2/lib/active_record/log_subscriber.rb:98
  ↳ app/controllers/posts_controller.rb:21
Processing by PostsController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"　　・・・・・・・・・・以下略

該当のソースコード

#post.js
$(function () {
  function buildHTML(post) {
    if (post.post_files) {
      var html =
　　　　　　　省略
    } else {
      var html =
　　　　　　　省略
    }
    return html;
  }

  $('#new_post').on('submit', function (e) {
    e.preventDefault()
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
      .done(function (data) {
        var html = buildHTML(data);
        $('.posts').prepend(html);
        $('form')[0].reset();
        $('.submit-btn').prop('disabled', false);
      })
      .fail(function () {
        alert("投稿に失敗しました");
      })
  });
});

#posts_controller.rb
class PostsController < ApplicationController
  before_action :set_group

  def index
    @post = Post.new
    @post_file = @post.post_files.build
    @posts = @group.posts.includes(:user).order("created_at DESC")
    @post_files = @post.post_files.all
    @looks = Look.new
  end

  def create
    @post = @group.posts.new(post_params)
      if @post.save
        if params[:post_files].present?
          params[:post_files]['file'].each do |a|
            @post_file = @post.post_files.create!(file: a, post_id: @post.id)
          end
        end
        respond_to do |format|
          format.json
        end
      else
        @posts = @group.posts.includes(:user).order("created_at DESC")
        render :index
      end
  end

  private
  def post_params
    params.require(:post).permit(:content, post_files_attributes: [:file]).merge(user_id: current_user.id)
  end

  def set_group
    @group = Group.find(params[:group_id])
  end
end

試したこと

恥ずかしながら、いろいろなワードで検索しましたが、同様のケースを見つけることができず、解決の糸口が掴めておりません。

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 5.2.3
JavaScript
jquery

Answer 1

post#createではjsでリクエストされ、jsonにしてもjsのリクエストが消えていないことが原因？
↓
user#createでデータを送信してみた。→html形式でリクエストされていた！
↓
postではform_withを使用、userではform_for使用しているという違いがあったので、postもform_forにしてみた。
↓
post#createのリクエストがhtml形式に変わり、ajaxを足したら、json形式のみになった。

一旦解決はしましたが、なぜform_withではいけなかったのかよくわかりません。
ajaxの記述との相性なのでしょうか・・・
お分かりになる方いらっしゃれば、ご教示いただけますと幸いです。

Answer 2

jQueryだけ見るとajaxは1度しか発行していないようにみえます
submitは殺しているので2度送ることはないでしょう。
あとはrubyを一旦排除してスタティックなhtml+jsで追いかけることです

Comments

[tiki]

回答ありがとうございます。
初学者のため的外れな質問でしたらご容赦ください。
rubyを一旦排除するとは、createメソッドを排除してみるということでしょうか。
createメソッドをコメントアウトしてみたところ、下記のようなterminalログとなりました。
```
Started POST "/groups/1/posts" for ::1 at 2020-05-15 18:22:31 +0900
Started POST "/groups/1/posts" for ::1 at 2020-05-15 18:22:31 +0900
Processing by PostsController#create as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"ZH6LzwKfPiyP1dzPUfidxxU9V6UX+xpr/Q2zxNIMmewOHb4O+GJ9MmguR2i1zX6YcmQIClQ1aDjuJnw8YRA4bw==", "post"=>{"content"=>"あいうえお"}, "group_id"=>"1"}
User Load (23.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1
↳ /Users/miyu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.2.4.2/lib/active_record/log_subscriber.rb:98
Processing by PostsController#create as JS
Parameters: {"utf8"=>"✓", "authenticity_token"=>"ZH6LzwKfPiyP1dzPUfidxxU9V6UX+xpr/Q2zxNIMmewOHb4O+GJ9MmguR2i1zX6YcmQIClQ1aDjuJnw8YRA4bw==", "post"=>{"content"=>"あいうえお"}, "commit"=>"投稿", "group_id"=>"1"}
Group Load (1.5ms) SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1
↳ app/controllers/posts_controller.rb:42
User Load (42.1ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 2 ORDER BY `users`.`id` ASC LIMIT 1
↳ /Users/miyu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/activerecord-5.2.4.2/lib/active_record/log_subscriber.rb:98
Rendering posts/create.json.jbuilder
Group Load (37.6ms) SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1
↳ app/controllers/posts_controller.rb:42
Rendering posts/create.json.jbuilder
Rendered posts/create.json.jbuilder (105.2ms)
Completed 500 Internal Server Error in 186ms (ActiveRecord: 24.7ms)
#エラー内容が続く
```
Started Postが2回ということは変わらず、jsonとjsで1回ずつデータを送っているようです。
この場合、htmlとjsに問題があるということでしょうか。
恐れ入りますが、よろしくお願いいたします。

[yambejp]

えーと、rubyでhtmlを作成しているなら、作成後のhtmlを利用して
検証してくださいということです。
ブラウザでソースを表示してコピペしてhtmlとして保存すればよいでしょう。
jsが2度送る仕組みになっているかどうかを検証できます。

[tiki]

ご教示いただきありがとうございます。
検証からコピペして新たにpost.htmlを作成しました。
createでbinding.pryもしてみましたが、やはり、データ形式がjsonとjsで2回送られてしまいます。
意図としては、jsで送られないようにしたいのですが、posts.jsとform以外に確認すべきファイルはありますでしょうか。
度々申し訳ございません。