お世話になります。実行後のタスクの文字色をAjaxにて変更する処理を書いたのですが、うまく動作しないことがあり、質問させていただきます。
環境
Ruby 2.6.5
Rails 6.0.2
Docker 19.03.13
#実現したいこと
実行したタスクを右側にある「チェックボタン」(画像中の赤矢印)をクリックすることによって、文字色が変化するようにしたいと思っています。以下の画像のようなイメージですのでご確認ください。
※ちなみに「チェックボタン」の右側にあるのは「実施取り消しボタン」です。
#Ajaxが動作しない状況について
Ajaxが動作しない状況について
ページをリロードした直後に、チェックボタンを押しても文字色が変化しません。ちなみにログを見ると以下のようになっています。
web_1 | Started POST "/habits/3/habit_schedules/75/done" for 172.18.0.1 at 2020-11-16 11:19:16 +0000 web_1 | Cannot render console from 172.18.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1 web_1 | Processing by HabitSchedulesController#done as JS web_1 | Parameters: {"habit_id"=>"3", "checkbox_id"=>"75"} web_1 | Checkbox Load (1.2ms) SELECT "habit_schedules".* FROM "habit_schedules" WHERE "habit_schedules"."type" = $1 AND "habit_schedules"."id" = $2 LIMIT $3 [["type", "Checkbox"], ["id", 75], ["LIMIT", 1]] web_1 | ↳ app/controllers/habit_schedules_controller.rb:3:in `done' web_1 | (0.5ms) BEGIN web_1 | ↳ app/controllers/habit_schedules_controller.rb:4:in `done' web_1 | User Load (0.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 3], ["LIMIT", 1]] web_1 | ↳ app/controllers/habit_schedules_controller.rb:4:in `done' web_1 | Habit Load (2.5ms) SELECT "habits".* FROM "habits" WHERE "habits"."id" = $1 LIMIT $2 [["id", 3], ["LIMIT", 1]] web_1 | ↳ app/controllers/habit_schedules_controller.rb:4:in `done' web_1 | Checkbox Update (1.0ms) UPDATE "habit_schedules" SET "checkbox" = $1, "updated_at" = $2 WHERE "habit_schedules"."id" = $3 [["checkbox", true], ["updated_at", "2020-11-16 11:19:16.934342"], ["id", 75]] web_1 | ↳ app/controllers/habit_schedules_controller.rb:4:in `done' web_1 | (1.7ms) COMMIT web_1 | ↳ app/controllers/habit_schedules_controller.rb:4:in `done' web_1 | Rendering habit_schedules/done.js.erb web_1 | Rendered habit_schedules/done.js.erb (Duration: 0.2ms | Allocations: 6) web_1 | Completed 200 OK in 46ms (Views: 3.4ms | ActiveRecord: 7.7ms | Allocations: 5785)
Ajaxが動作する状況
文字色がすでに青色になった状態で、「チェックボタン」「実施取り消しボタン」を押すと、ページの遷移なく文字色が変化し、Ajaxが動作しているように見えます。
##関連するソースコード
routing
1Rails.application.routes.draw do 2 #中略 3 resources :habits do 4 post 'habit_schedules/:checkbox_id/done', to: 'habit_schedules#done', as: :done 5 post 'habit_schedules/:checkbox_id/notdone', to: 'habit_schedules#notdone', as: :notdone 6 end 7end
controller
1class HabitSchedulesController < ApplicationController 2 def done 3 @checkbox = Checkbox.all.find(params[:checkbox_id]) 4 @checkbox.update(checkbox: true) 5 end 6 7 def notdone 8 @checkbox = Checkbox.all.find(params[:checkbox_id]) 9 @checkbox.update(checkbox: false) 10 end 11end
view
1<% @checkboxes.each do |checkbox| %> 2 <% if checkbox.scheduled_date == display_date %> 3 <%= content_tag "tr", class: "item" do %> 4 <% if checkbox.checkbox == true %> 5 <%= content_tag "td", id: "checkbox-#{checkbox.id}", class: "done-css" do %> 6 <i class="<%= checkbox.habit.icon %> fa-lg fa-fw"></i> <%= checkbox.habit.name %> 7 <% end %> 8 <% else %> 9 <td ><i class="<%= checkbox.habit.icon %> fa-lg fa-fw"></i> <%= checkbox.habit.name %></td> 10 <% end %> 11 <td class="text-right"> 12 <%= link_to habit_done_path(habit_id: checkbox.habit.id, checkbox_id: checkbox.id), method: :post, remote: true do %> 13 <i class="fas fa-check fa-lg fa-fw"></i> 14 <% end %> 15 <%= link_to habit_notdone_path(habit_id: checkbox.habit.id, checkbox_id: checkbox.id), method: :post, remote: true do %> 16 <i class="fas fa-times fa-lg fa-fw"></i> 17 <% end %> 18 </td> 19 <% end %> 20 <% end %> 21<% end %>
#done.js.erb document.getElementById("checkbox-<%= @checkbox.id %>").style.color = "blue";
#notdone.js.erb document.getElementById("checkbox-<%= @checkbox.id %>").style.color = "gray";
エラーらしいエラーが出ておらず、どのように解決したら良いか困っています。他に解決のために必要な情報がありましたら、教えてください。
よろしくお願いします。
あなたの回答
tips
プレビュー