Todo削除リンククリック時の挙動設定

#08 Todo更新情報をDBへ反映を削除してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9308
を元に
削除リンククリック時の挙動を作成

編集するのは index.php

削除するには li要素の id が必要になるので

<?php foreach($tasks as $task) :?>
<li>

の li へ id をつける

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

とすることで
foreach() でループしたぶんだけ idが割り当てられる

なお config.php で h() を作成して
出力される文字を無害化するのを忘れずに

id="task_<?php echo h($task['id']); ?>"

は
task_数値

data-id="<?php echo h($task['id']); ?>"

は
数値

というように出力される

これで

        if(confirm('本当に削除しますか？')){
                        
        }

で
この割り当てた id を使って id を引っ張ってくる

var id =$(this).parent().data('id');

とする

$(this)
は、現在の要素、つまり
今回なら

<span class="delete-task">[削除]</span>

を意味する

.parent() は、その親要素という意味なので

<span>

の親要素は

<li>

となる

.parent().data('id')

なので、
li 要素の id ということで

 id="task_<?php echo h($task['id']); ?>"

になる

 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 ファイルを作っていく

$.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]
の中に書く　

このときの処理は

$('#task_'+id).fadeOut(800);

で、該当する id の li 要素を
.fadeOut() を使って
指定したミリ秒でフェードアウトする
今回なら 0.8秒になる

$(‘#task_’+id)は

<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
で違いを比較したところ

  $(document).on('click','.delete-task',function(){

が

  $(document).on('cluck','delete-task',function(){

というように
click が cluck だったり
.delete-task の .　がなかったりしてうまくいかなかた
これを修正して再度実行すると成功した

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