[rails]ajaxにてjson形式でコントローラーに送った値をデータベースに保存する

前提・実現したいこと

ユーザーの名前を一覧表示させ、その隣にあるボタンを押すと、現在時刻とユーザーIDが別テーブルに保存させる仕組みを実装しています。ボタンタグのValueには各ユーザーのIDが格納されていて、ボタンをクリックした際に、そのボタンタグのvalueを変数に代入し、その値をコントローラーのcreateアクションに送信、保存したいと考えています。学習を始めて日が浅く、変な質問だったら申し訳ないです。

発生している問題・エラーメッセージ

エラーはでないが、ajaxでのデータの受け渡しがうまくいかない。

該当のソースコード

index.html.haml

%ul
  - @users.each do |user|
    %li
      = user.name
    %button{class: "start-btn", value: user.id}
      出勤

records_controller.rb

def create
  @record = Record.create(into: Time.now, user_id: params[:id])
  respond_to do |format| 
    format.json { redirect_to root_path }
    format.html { redirect_to root_path }
  end
end

user.js

$(document).on('click', '.start-btn', function(e){
    e.preventDefault();
    var id = $(this).val();
    $.ajax({
      url: '/records',
      type: 'POST',
      data: id,
      processData: false,
      contentType: false,
      dataType: 'json'
    })
    .done(function(data){
      console.log(data)
    })
  })

試したこと

jsファイルにて変数に値を代入後、console.logでその中身を確認すると、値は取得できているが、ボタンをクリックすると保存されたレコードにはNULLが入っている。

rails 5.2.3

退会済みユーザー

2019/11/30 23:06

fiddler を使って要求・応答をキャプチャーして、その中身を調べると解決のためのヒントが見つかると思います。なんとなく、jQuery ajax のコードに問題があってサーバー側が期待するデータを渡せてない気がします。(気がするだけです。そこを fiddler で確認してください)

行動規範の内容に同意します

回答1件

$.ajax の post メソッド時の記述方法が誤っているように見えました。
以下の記事を参考にしました。

https://stackoverflow.com/questions/17559563/sending-ajax-post-jquery-in-rails-application

user.js
1$(document).on('click', '.start-btn', function(e){
2  e.preventDefault();
3  var id = $(this).val();
4  $.ajax({
5    url: '/records',
6    type: 'POST',
7    // ここを以下のように直してみてはいかがでしょう？
8    // data: id,
9    data: { id: id },
10    processData: false,
11    contentType: false,
12    dataType: 'json'
13  })
14  .done(function(data){
15    console.log(data)
16  })
17});