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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2527閲覧

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

yamaoka

総合スコア27

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/06 04:18

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

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

開発環境 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)

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moke

2017/02/06 04:39

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

回答1

0

ベストアンサー

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

投稿2017/02/08 08:49

編集2017/02/08 09:11
NishidaRyu416_

総合スコア113

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問