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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

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

Q&A

2回答

5460閲覧

Djangoにおいてcheckboxのみでformの送信が出来ない

Yusei

総合スコア11

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

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

0グッド

0クリップ

投稿2016/07/12 14:44

###前提・実現したいこと
Python(Django)でタスク管理アプリを作成しています
タスクの完了・非完了を分けるためにチェックボックスにチェックを入れるか否かでタスクを分けています
このような表示
四角の部分にチェックを入れたら、タスクの中のdoneをTrueにして、チェックを解除したらdoneをFalseにして...
ということがやりたいことになります

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

現状、html側でJQueryを用いてチェックの処理
Python側でDBの操作といった具合に調整しています
ところが、チェックを入れると

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

となってしまいます

###該当のソースコード
タスクを一覧表示するページになります
del-idなどと書かれているのは、選択削除機能を実装しているためです

html

1{% extends "base.html" %} 2{% load staticfiles %} 3 4 5{% block title %}To do list{% endblock %} 6 7{% block jumbo_title %}Detail Tasks{% endblock %} 8 9{% block nav_index %}active{% endblock %} 10 11{% block content %} 12{% if task_list %} 13<ul class="list-group"> 14 {% for task in task_list %} 15 16 17 18 {% if task.done %} 19 <input type="checkbox" class="del-id" chk-url="/task/" value={{task.id}} checked=true/> 20 <li class="list-group-item disabled" disable-id="{{task.id}}"> 21 {% else %} 22 <input type="checkbox" class="del-id" chk-url="/task/" value={{task.id}}/> 23 <li class="list-group-item" disable-id="{{task.id}}"> 24 {% endif %} 25 <div class="position"> 26 <label> 27 <a href="{% url 'task' task.id%}"> 28 {{task.title}} 29 </a> 30 </label> 31 </div> 32 33 Abstract {{task.text}} 34 </li> 35 36 37 {% endfor %} 38</ul> 39</div> 40<script> 41 //.del-id:checkedにすると500 42 //.del-idではcheck failed 43 //class nameが一緒なので、操作をしようとするとチェックの入っているもの全てに操作が及んでしまう 44 $(function() { 45 $(".del-id").on("click", function() { 46 chk_status = $(".del-id").prop("checked"); 47 if(chk_status){ 48 //チェックボックスをOFFにする(チェックを外す)。 49 $(".del-id").prop("checked", false); 50 }else{ 51 //チェックボックスをONにする(チェックする)。 52 $(".del-id").prop("checked", true); 53 } 54 chk_area = $('.del-id').map(function(){ 55 return $(this).val(); 56 }).get(); 57 var chk_url = $(this).attr('chk-url'); 58 chk_area.map(function (c_id){ 59 chk_url = chk_url + c_id.slice(0,2) + ','; 60 }); 61 62 $.ajax({ 63 url: chk_url, 64 type: 'POST', 65 success: function(response) { 66 if (response.status === 'OK') { 67 window.location = '{% url 'index' %}'; 68 } else { 69 alert('Check failed.') 70 } 71 } 72 }); 73 return false; 74 }); 75 }); 76</script> 77{% else %} 78<p>No tasks.</p> 79{% endif %} 80{% endblock %}

ところどころコードとして荒い部分はご容赦下さい
Python側では単純にDBの更新を行い、成功すれば200を返すだけなので省略させていただきます

###試したこと
主に原因として
・JQueryが上手く扱えていない
・この書き方だとcheckboxがそれぞれ同じid,class等を持ってしまうため仮に上手く実装出来ても、1つチェックするだけで全てに変更が行き渡ってしまう恐れがある

といったものが考えられるだろうかと思いました
ですが、これ以外のタスク一覧の表記の仕方が分かりませんでしたし、何が根本的な原因かということもはっきりとは分からなかったので現状としてはこのままになっています
この解決法以外にも、別の形でこのtodoアプリを表現出来るというものがあれば是非よろしくお願いします

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

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

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

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

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

attakei

2016/07/12 15:31

エラー発生時のブラウザ/サーバーそれぞれでの状況を一度確認して、質問欄に追記した方が回答を得られやすいと思います。 「何をしたか」は丁寧に書いておられるようなのですが、「どうなったか」の部分をもう少し詳細に書いてもらった方がどういう挙動の結果500エラーになったのかがつかみにくいと思います。 また、500エラー自体はサーバサイド処理の問題なので、可能であればurls.pyやviews.pyあたりは抜粋して記載した方がいいかと思います。
guest

回答2

0

.del-idがクリックされたときのイベントの中に

javascript

1 $(function() { 2 $(".del-id").on("click", function() { 3 //chk_status = $(".del-id").prop("checked"); 4 chk_status = $(this).prop("checked"); 5 if(chk_status){ 6 //チェックボックスをOFFにする(チェックを外す)。 7 // $(".del-id").prop("checked", false); 8 $(this).prop('checked', false); 9 }else{ 10 //チェックボックスをONにする(チェックする)。 11 // $(".del-id").prop("checked", true); 12 $(this).prop('checked', false); 13 } 14 chk_area = $('.del-id').map(function(){ 15 return $(this).val(); 16 }).get(); 17 var chk_url = $(this).attr('chk-url'); 18 chk_area.map(function (c_id){ 19 chk_url = chk_url + c_id.slice(0,2) + ','; 20 });

みたいな感じで、クラスでは要素を2つ指定してしまうのですが、thisを使うことで.del-idのクリックされた1つの要素を指すのでこれでダメでしょうか??

投稿2016/07/16 04:25

jjzoow96

総合スコア40

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

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

Yusei

2016/08/01 15:39

ありがとうございます!!!試してみます!!
guest

0

jQueryのイベントはイベントが発生したDOM要素を引数に持たせることが可能なので、
それでトリガーとなるinputタグのvalueをとるのが一番いいと思います。
ちょっと古いバージョンのドキュメントですが

javascript

1 $(".del-id").on("click", function(event) { 2 event.target.prop("checked", true); 3 chk_id = event.target.value; 4 //以下略 5 });

こんな感じのコードで、単体のinputタグの情報のみをPOSTに持たせられるかと。

※ただし、げんdjangoの側でそのリクエストを処理できない可能性もあるのですが

投稿2016/07/12 15:55

attakei

総合スコア2738

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

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

Yusei

2016/08/01 15:38

返信が遅れてしまいすみません...ありがとうございます!!!!試してみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問