###前提・実現したいこと
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アプリを表現出来るというものがあれば是非よろしくお願いします