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” になり
ついていないなら、このクラスがついていないことになる

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 でエラーがでていないか確認

コメントを残す コメントをキャンセル