二度データが保存される rails & ajax

Question

###前提・実現したいこと

ruby on railsでメッセージをAPIとajax使用して作っています。
メッセージをほ保存する機能を実装中に以下の2回保存されてしまうエラーが発生しました。

###該当のソースコード

  def create
    @message = @chat_group.messages.new(message_params)
      respond_to do |format|
        if @message.save
          format.json { render json:
            {
              name: @message.user.name,
              date: @message.created_at.strftime('%Y/%m/%d %H:%M:%S'),
              body: @message.body,
              id:   @message.chat_group.id,
            }
          }
          format.html { redirect_to chat_group_messages_path(@chat_group) }
        else
          redirect_to chat_group_messages_path(@chat_group)
          flash[:alert] = 'fail in post message'
        end
      end
  end

    $(function () {
        $('#new_message').on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: "./messages.json",
                type: 'POST',
                datatype: 'json',
                data: {
                    message: {
                        body: $(this).find('#message_body').prop('value'),
                    }
                }
            })
            .done(function (data) {
                insert(data);
                alert( "Data Saved: ");
            })
            .fail(function () {
                console.log("fail");
            });
        });
    });
});

###試したこと

saveとpostが行われていることによって2回保存されることまで把握したが、ajaxで行いためpostを外すことができません。またsaveを使用しなければ、created_atやupdated_atが入力されないため、うまくいきません。

このようにajaxを使用したい場合はどのように行うと1回のみの保存でうまくいくでしょうか。

db/migrate にtimestamp null: falseなど記入してもうまくいきませんでした。

Answer 1

saveとpostが行われていることによって2回保存されることまで把握したが、ajaxで行いためpostを外すことができません。またsaveを使用しなければ、created_atやupdated_atが入力されないため、うまくいきません。

このようにajaxを使用したい場合はどのように行うと1回のみの保存でうまくいくでしょうか。

Ruby on Rails がまったくわかりませんが、一般的には、onsubmit のハンドラの結果が false を返すようにすれば、ブラウザによるフォームの POST を止めることができます。

参考：onsubmitの戻り値をfalseにしてsubmitを実行しない（中断させる）方法

Comments

[shuhei_div]

ブラウザによるformを止めるとうまくいきました。

ありがとうございます。
もう一度熟考します。

Answer 2

上がっているコードを見た感じ、1回の保存で終わりそうに見えました。

なのでボタンを2重に押しているか、何かしらの影響でコントローラーのcreateが2回呼ばれているか、createメソッド内で何かレコードに保存するメソッドをsave以外に呼び出しているか、これらの可能性が考えられます。

createメソッド内にbinding.pryを書いてステップ実行しながら、何時2回目の保存が行われているかをみると解決できるかもしれません。

Comments

[shuhei_div]

ありがとうございます！一度行ってみます！