jQueryとAjaxを使ってデータの削除処理を実装
#15 データを削除してみよう (1)
http://dotinstall.com/lessons/contacts_php_v2/9815
を元に
jQueryとAjaxを使ってデータの削除処理を実装
編集するファイルは
admin/index.php
まず、jQuery を使うので、ライブラリの読み込み
HTMLの head 要素の中に
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
を追記
deletelink に対してクリックされたときの処理を
jQuery で実装する
書き込み場所は
お問い合わせフォームへのリンクの下あたり
$(function(){
$(‘.deletelink’).click(‘function(){
if(confirm(“削除してもよろしいですか？”)){
$.post(‘./delete.php’,
.deletelink は
class=”deletelink” という意味
. は jQuery ではクラスを意味する
confirm() は java script で 確認ウインドウを開く
“”の中に書いた
削除してもよろしいですか？は
そのときにでるメッセージ
これは
Step.17 – 確認ウィンドウで問い合わせる
http://www.red.oit-net.jp/tatsuya/java/confirm.htm
がわかりやすい
$.post() は
ajax jQuery を使ったPOST送信
これを使うと、複雑な$.ajax() を使わずに
サーバーと通信できる
http://semooh.jp/jquery/api/ajax/jQuery.post/+url,+data,+callback,+type+/
を参考にするとわかりやすい
書式としては
$.post(url, data, callback, type)
となる
$.post(
‘./delete.php’,
{ id: $(this).data(‘id’)},
function(rs){
$(‘#entry_’ +rs).fadeOut(800);
});
}
});
コールバック関数で消したいのは li 要素なので
li要素に id をつける
<li id=”entry_<?php echo h($entry[‘id’]); ?>”>
とする
PHPで 呼び出しているので
ループしている間、自動的に id を付与してくれる
また、コールバック関数内で
rsに id が入るようになるので
entry_ + rs だと
id=1 なら entry_1 となる