Ruby on rails で開発をしている初心者です。
現在、非同期通信でサブウィンドウからタスク登録ができるよう実装しているところです。
登録の際に、ログイン中のユーザーIDと結び付けてDBに保存したいと思い、gonをbundle installしたのですがうまく動作してくれません。
(application.html.erbに<%= Gon::Base.render_data %>は記載済みです。)
コードは以下の通りです。
task.controller.rb
def create
gon.userid = current_user_id
@task = Task.new(task_params)
@task.save
respond_to do |format|
format.html { redirect_to root_path }
format.json{ render json: @task }
end
end
private
def task_params
params.permit(:task_name, :user_id)
end
end
add.js
window.addEventListener('load', function(){
/** @type {HTMLButtonElement} */
var openFormButton = document.querySelector(".open-form-button");
/** @type {HTMLElement} */
var modalOverlay = document.querySelector(".modal-overlay");
/** @type {HTMLFormElement} */
var form = document.querySelector(".modal-form");
var submitButton = document.querySelector(".submit-button");
var closeButton = document.querySelector(".close-button");
openFormButton.addEventListener("click", function() {
$('.add-btn').removeAttr('data-disable-with')
form.reset();
modalOverlay.style.display = "block";
});
submitButton.addEventListener("click", function() {
var userId = gon.userid
$(function(){
$.ajax({
url: '/tasks',
type: 'POST',
dataType: 'json',
async: true,
data: {
task_name: document.querySelector('input[type=text][name=task_name]').value,
user_id: (userId)
},
})
.done(function(data){
var nesting = $('<div class="add-task-mass">').append('<div class="decrease-btn">-</div>', '<div id="task-title">'+ data.task_name +'</div>', '<div class="increase-btn">+</div>')
$('.add-task').append(nesting)
})
});
});
closeButton.addEventListener("click", function() {
modalOverlay.style.display = "none";
});
})
試しにcreateメソッドでgon.userid=100に設定し、ブラウザのコンソールで確認したのですが、gon.useridは定義されていないと返ってきてしまいました。
初歩的な内容で申し訳ありませんが、お知恵を拝借させていただければ幸いです。