RailsのViewからJavascriptでnestされたidを取得して、Postする方法

Question

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

indexのページにTableがあり、そこにずらっとデータがリストされています。
右端にCheckBoxを用意し、そこのCheckBoxにCheckを入れると、AjaxでTrueがPostされ、Checkを外しとFalseがPostされるようにしたいと思っています。

indexのURL
localhost:3000/company/2/user_lists

<input type="checkbox" name="config_ids[]" id="config_id_7" value="7" data-user-id="7" data-company-id="2" class="config_check" />

色々工夫して、上記のようなURLを生成することに成功したのですが、ここからJavascriptで、user_list_controllerのtoggleメソッドにアクセスしたいのですが、うまいようにURLを設定することができていません。雰囲気的にはなんとなく理解しているのですが、どのように該当するIDを取得して、それをコントローラに入れることができるのか、教えてください。

$(".config_check").bind('change', function(){

  var id = $('this').data('user_id');
  var company_id = $('this').data('company_id');

  if (this.checked){
    var bool = this.checked ? 1 : 0;
    $.ajax({
      url: '/company/'+company_id+'/user_list/'+id +'/toggle',
      type: 'POST',
      data: '{"user_id":"'+ this.value +'", "bool":"'+ bool +'"}'
    });
  }
  else {
    alert("できていないよ");
  }
});

Controller 
def toggle
    @user = User.find(params[:id])
    if params[:config] == nil
      @user.update(:config => false)
    else
      @user.update(:config => params[:config])
    end
end

###補足情報(言語/FW/ツール等のバージョンなど)
Javascript

Answer 1

jquery3系以前のバージョンであれば、下記のようにします。Rubyからは成功時、失敗時でどちらとも何かを返すようにします。

下記の例では、Json文字列を返すことを想定しています。Rubyから何も返さない場合でも、Jsonとしての空を表す{} or nullを返さなくてはなりません。

$(".config_check").on('change', function(e) {
  var $elem = $(e.target);
  var id = $elem.data('user_id');
  var company_id = $elem.data('company_id');
  var bool = $elem.is(':checked') ? 1 : 0;

  if (bool){
    $.ajax({
      url: '/company/'+company_id+'/user_list/'+id +'/toggle',
      type: 'POST',
      dataType: 'json',
      data: {user_id: $elem.val(), bool: bool},
      success: function (json) {
        //成功時の処理
      },
      error: function (xhr, status) {
        //エラー時の処理
        console.log(xhr, status);
      }
    });
  }
  else {
    alert("できていないよ");
  }
});

jquery3系以降であれば下記のように書きます。

$(".config_check").on('change', function(e) {
  var $elem = $(e.target);
  var id = $elem.data('user_id');
  var company_id = $elem.data('company_id');
  var bool = $elem.is(':checked') ? 1 : 0;

  if (bool){
    $.ajax({
      url: '/company/'+company_id+'/user_list/'+id +'/toggle',
      type: 'POST',
      dataType: 'json',
      data: {user_id: $elem.val(), bool: bool}
    })
    .done(function (json) {
      //成功時の処理
    })
    .fail(function (xhr, status) {
      //エラー時の処理
      console.log(xhr, status);
    });
  }
  else {
    alert("できていないよ");
  }
});

Comments

[Yuinyan]

有難うございます！

実装して見たところ、パラメータは飛ぶようになりました。しかし、下記のようなメッセージでうまくいきませんでした。ちなみにcreated_atなども実装する必要があるのでしょうか。
Parameters: {"id"=>"66", "bool"=>"1"}
10:55:39 web.1 | Can't verify CSRF token authenticity.
10:55:39 web.1 | Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms)

[Yuinyan]

すみません、自己解決できました！この度は、教えていただき有難うございました！また宜しくお願いします！