Todo チェック情報のDB反映
#11 チェック機能を実装してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9311
を元に
チェック情報をDBに反映させる
まず、どの要素なのか特定するために id を取得したいので
var id =$(this).parent().data('id');
現在の要素は
<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
echo "checked"; }?>>
なので
この input の親要素、つまり１つ↑の要素なので
<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">
ということになり li 要素の id となる
次にチェックボックスの状態を取得したいので
var title = $(this).next();
next() は、現在の要素の次の要素となるので
現在の input の次の
<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>
を指す
これで、
var title へ
notyet
done
delete
のどれかの状態が格納されることになる
そして、次に Ajax 処理になる
$>post('_ajax_check_task.php',{id:id},function(rs){
});
実際の処理をするのは
_ajax_check_task.php
で
渡すのは id
成功したときの処理は
function(rs){
}
の中に書く
まず、成功したときの処理を記述
if(title.hasClass('done')){
title.removeClass('done');
}else{
title.addClass('done');
}
これは
.removeClass() で class=”done” を消して
.addClass() で class=”done” をつけている
こうすることで
チェックボックスがついているなら
class=”done” になり
ついていないなら、このクラスがついていないことになる
removeClass() については
http://semooh.jp/jquery/api/attributes/removeClass/class/
addClass() については
http://semooh.jp/jquery/api/attributes/addClass/class/
のリファレンスを参考にする
ここまでできたら
_ajax_check_task.php
を作成する
違いは sql の内容なので
cp _ajax_delete_task.php _ajax_check_task.php
でファイルをコピーして編集する
$sql ="update tasks set type = 'delete',modified = now() where id = :id";
の部分を
$sql =”update tasks set type = if(type=’done’, ‘notyet’, ‘done’) ,modified = now() where id = :id”;
とする
mysql では if 文による分岐ができるため
type=’done’ なら
notyet にして
そうでないのなら
done にするという判定処理ができる
その部分が
if(type='done', 'notyet', 'done')
使い慣れた言語で書き換えてみると
if(type=='done'){
type="notyet";
}else {
type="done";
}
とおなじ意味になる
これは三項演算子をやったことがあると
イメージしやすいかもしれない
ここまでできたら
chrome で検証
チェックボックスのチェックを入れたり消したりして
無事に反映されれば成功
もし動作しないのなら
Ctrl + shift +i
で developer tools を起動して
console でエラーがでていないか確認