質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

railsアプリでチェックボックスがうまく機能しない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,149

yamaoka

score 27

前提・実現したいこと

現在プロジェクトを作り、そのプロジェクトの中にタスクを作り、タスクを達成したらチェックボックスにチェックをするというアプリを作っています。

具体的な機能としてはプロジェクトの一覧に、そこに登録しているタスクの数と、チェックが付いたタスクの数を表示。
一度チェックボックスをチェックしたら、画面を移動するなどの操作をしても、チェックが外れないことを目指しています。

開発環境 cloud9
バージョン ruby 2.3.0p0 

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

【プロジェクト一覧】
プロジェクト名 (チェックしたタスクの数)/(登録しているタスクの数)

としたいのですが、チェックしていないのにタスクがカウントされてしまっています。

また、一度タスクにチェックをつけても画面を移動するとチェックが外れてしまいます。

該当のソースコード

プロジェクト一覧のコードです。チェックのついているタスクとそうでないタスクのカウントをしています。

<ul>
    <% @projects.each do |project| %>
    <li>
        <%= link_to project.title, project_path(project.id) %>(<%=project.tasks.unfinished.count %>/<%= project.tasks.count %>)
        <button type="button" class="btn btn-default btn-xs"><%= link_to "Edit", edit_project_path(project.id) %></button>
        <button type="button" class="btn btn-default btn-xs"><%= link_to "Delete", project_path(project.id), method: :delete, data: {confirm: "are you sure?"} %></button>
    </li>
    <% end %>
</ul>

タスクとチェックボックスのコードです。
jqueryでチェックをつけるようにしました

<h1 class="project-show-h"><%= @project.title %></h1>

<ul class="project-show-ul">
    <% @project.tasks.each do |task| %>
    <li class="project-show-li">
        <%= check_box_tag '', '', task.done, {'data-id' => task.id, 'data-project-id'=> task.project_id }%> 
        <%= task.title %>
        <%= link_to "Delete", project_task_path(task.project_id, task.id), method: :delete, data: {confirm: "are you sure?"} %>
    </li>
    <% end %>
    <li class="project-show-form">
        <%= form_for [@project, @project.tasks.build] do |f| %>
        <%= f.text_field :title %>
        <%= f.submit :class=>"project-new-btn"%>
        <% end %>
    </li>
</ul>

<script>
    $(function(){
        $("input[type=checkbox]").click(function(){
            $post('/projects/'+$(this).data('project_id')+'/tasks/'+$(this).data('id')+'/toggle');
        })
    })
</script>

jqueryのアクションのルートです。

post '/projects/:product_id/tasks/:id/toggle' => 'tasks#toggle'

タスクコントローラーです

class TasksController < ApplicationController

    def create
        @project = Project.find(params[:project_id])
        @task = @project.tasks.create(task_params)
            redirect_to project_path(@project.id)
    end

    def destroy
        @task = Task.find(params[:id])
        @task.destroy
        redirect_to project_path(params[:project_id])
    end

    def toggle
        render nothing: true
        @task = Task.find(params[:id])
        @task.done = !@task.done
        @task.save
    end

    private

    def task_params
        params[:task].permit(:title)
    end
end

試したこと

ブラウザ上では特にエラーは出ていないようなので、チェックボックスをチェックした後ほかのページに移動した際のサーバーのログを見てみました。ですが、エラーは出ていないようでしたし、どうなっているのが正解かわかりません。
ちなみにログはこのようなものが出ました
Started GET "/projects" for 111.100.2.5 at 2017-02-06 04:05:47 +0000
Cannot render console from 111.100.2.5! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ProjectsController#index as HTML
User Load (0.6ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1  [["id", 8]]
Project Load (0.9ms)  SELECT "projects".* FROM "projects"
(0.7ms)  SELECT COUNT(*) FROM "tasks" WHERE "tasks"."project_id" = $1 AND "tasks"."done" = $2  [["project_id", 5], ["done", "f"]]
(0.6ms)  SELECT COUNT(*) FROM "tasks" WHERE "tasks"."project_id" = $1  [["project_id", 5]]
Rendered projects/index.html.erb within layouts/application (124.9ms)
Completed 200 OK in 267ms (Views: 259.3ms | ActiveRecord: 2.8ms)

Started GET "/projects/5" for 111.100.2.5 at 2017-02-06 04:05:49 +0000
Cannot render console from 111.100.2.5! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ProjectsController#show as HTML
Parameters: {"id"=>"5"}
Project Load (1.7ms)  SELECT  "projects".* FROM "projects" WHERE "projects"."id" = $1 LIMIT 1  [["id", 5]]
User Load (1.6ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1  [["id", 8]]
Task Load (0.6ms)  SELECT "tasks".* FROM "tasks" WHERE "tasks"."project_id" = $1  [["project_id", 5]]
Rendered projects/show.html.erb within layouts/application (9.8ms)
Completed 200 OK in 152ms (Views: 141.8ms | ActiveRecord: 3.9ms)

タスク関連のコードのスペルミスがないか確認したりしたのですが、特に問題ないように思えました。

自分ではおかしなところがわからなかったので、この書き方はおかしいというようなことがわかる方がいらっしゃいましたらご指摘いただけませんでしょうか?
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • moke

    2017/02/06 13:39

    checkはちゃんと更新されていますか? 更新されているなら問題はmodel taskにあります。scope :unfinishedが間違っているのでは?

    キャンセル

回答 1

checkベストアンサー

0

Twitter などのフォローボタンの機能のようにするには、(データを永続化するには)チェックボックスに対してのdbが必要だと思います。つまり、taskに関連するdbを作ればいいということです。
補足 簡単にカウントもできます。
または、タスクのdbにBoolean型done(例)カラムを追加し、完了しているタスクのカウントはTask.where(done: :true).count
とかでいけると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る