Todo削除リンククリック時の挙動設定
#08 Todo更新情報をDBへ反映を削除してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9308
を元に
削除リンククリック時の挙動を作成
編集するのは index.php
削除するには li要素の id が必要になるので
1 2 | <?php foreach($tasks as $task) :?><li> |
の li へ id をつける
1 | <li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>"> |
とすることで
foreach() でループしたぶんだけ idが割り当てられる
なお config.php で h() を作成して
出力される文字を無害化するのを忘れずに
1 | id="task_<?php echo h($task['id']); ?>" |
は
task_数値
1 | data-id="<?php echo h($task['id']); ?>" |
は
数値
というように出力される
これで
1 2 3 | if(confirm('本当に削除しますか？')){ } |
で
この割り当てた id を使って id を引っ張ってくる
1 | var id =$(this).parent().data('id'); |
とする
$(this)
は、現在の要素、つまり
今回なら
1 | <span class="delete-task">[削除]</span> |
を意味する
.parent() は、その親要素という意味なので
1 | <span> |
の親要素は
1 | <li> |
となる
1 | .parent().data('id') |
なので、
li 要素の id ということで
1 | id="task_<?php echo h($task['id']); ?>" |
になる
1 | data-id="<?php echo h($task['id']); ?>" |
ではないので注意
.parent() については
http://www.jquerystudy.info/reference/traversing/parent.html
のリファレンスを参考にする
構文は .parent(セレクタ)
セレクタは、html の要素
今回から li になっている
.data() については
http://semooh.jp/jquery/api/internals/jQuery.data/elem,+name/
のリファレンスを参考に
.data() は指定された名前の値をかえす
今回なら.data(‘id’)なので
id=”” の部分の値をかえす
次にDBで削除処理する Ajax ファイルを作っていく
1 2 3 4 5 | $.post('_ajax_delete_task.php',{ id:id, },function(rs){ $('#task_'+id).fadeOut(800); }); |
.post() は
POSTでページを読み込む関数
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data%2C+callback%2C+type+/
のリファレンスを参考にする
引数の意味は
‘_ajax_delete_task.php’
が読み込むURL
id;id
が、キーと値の組み合わせ
function(rs){
}
が通信成功のときの処理になる
このときに渡すのは 該当する taskのid になるので
id:id,
終わったときの処理は[/php]
function(rs){
}[/php]
の中に書く
このときの処理は
1 | $('#task_'+id).fadeOut(800); |
で、該当する id の li 要素を
.fadeOut() を使って
指定したミリ秒でフェードアウトする
今回なら 0.8秒になる
$(‘#task_’+id)は
1 | <li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>"> |
のこと
とりあえず
touch _ajax_delete_task.php
でファイルだけつくって
実行
chrome の developer tools で確認して
エラーがないけどうまく起動しないため
vim index.php_post
でファイルを作成して
ソースをコピペ
diff -w index.php index.php_post
で違いを比較したところ
1 | $(document).on('click','.delete-task',function(){ |
が
1 | $(document).on('cluck','delete-task',function(){ |
というように
click が cluck だったり
.delete-task の . がなかったりしてうまくいかなかた
これを修正して再度実行すると成功した