Ajaxでアップロードした画像に削除フォームを付けるには

Question

https://teratail.com/questions/1607
こちらの質問へのベストアンサーのソースに対して削除フォームを付けようとしているのですが、上手く動作しないで困っています。

方法としては、元のソースに加えて削除用のプログラムimg.delete.phpを作り、

if(file_exists($_POST['delFile'])){
    unlink($_POST['delFile']);
}

./imglist.phpのこの行の後に

echo "<img src='{$fl}' class='img_list' title='クリックして追加' />";

このようなフォームを追加して一度アップロードした画像一つ一つに削除ボタンを付けてクリックしたらその画像が削除されるようにしたいのですが、HTMLフォームの画面で出てきたボタンをクリックしたらimg.delete.phpに飛ばされてしまいます。

echo <<<EOM
<form id="imgForm" method="post" action="img.delete.php">
<input type="hidden" name="delFile" id="sendFile" value="{$fl}">
<input id="imgDelete" type="submit" value="削除">
</form>
EOM;

img.delete.phpに飛ばされた後にHTMLのフォームに戻ったら目的の画像は消えているのですが、画面遷移を起こさずに画面上の画像が消えるようにしたいです。

Ajaxで読み込んだhtmlのフォームに対してはadd.jsは効いていないのでしょうか？
こういう場合はどういう方法で実装するのが最良か、お知恵をお貸し頂ければ幸いです。

Answer 1

・画面は遷移させたくない
・別プログラムで処理したい(ファイル削除)

という前提条件でよろしいでしょうか？
であれば、やはりAjaxを使うと良いと思います。

Jqueryのajaxメソッドを使うと、画面遷移することなく別プログラムに処理を依頼し、結果を受け取ることが出来ます。
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

例です。

    // 送りたいパラメータを指定
    var param = {};
    param['delFile'] = $('#sendFile').val();
    param['imgDelete'] = 1;
    $.ajax({
      type:"POST",
      url:"img.delete.phpへのパス",
      data:param,
      success: function(rtn_str){
        //-- 通信が成功した時の処理をここに
        // rtn_strにはimg.delete.phpの出力が入ってきます。
        // img.delete.phpでファイル削除に成功したらecho 1;とかしておくと成否が解りやすいと思います。

          // 私なら成功時の処理メッセージをHTMLに埋め込みます。
          $(メッセージ表示エリアのセレクタ).text('ファイルを削除しました');
      }
    });

参加したばかりなので、勝手が解らず
読み取りにくいところがあるかもしれません。

お役に立てば幸いです。

Comments

[schwarzewald]

すみません、こちらはどこに入れたらいいのでしょうか？
add.jsの$(function(){}の中に入れても画面遷移してしまうのですが

[takeyoshi]

HTMLのフォーム/submitボタンをそのまま利用されているからではないでしょうか？

1.私が提示したロジックをメソッド化
2.削除ボタンをクリックしたら作成したメソッドが実行されるように/フォームのsubmitは走らないように

という風にする必要があります。
すでに作成済みのadd.jsは別の話ですので、一度離れられた方が良いと思いますよ。
---
いろんな方法があると思うのですが、以下に私のサンプルをざっくりと書いてみます。
※ 動作確認していないので誤りがあったらすみません。適宜ご修正ください。

○ ファイルを削除するフォーム / HTML(schwarzewaldさんがPHPで出力しているもの)
submitはいけません。buttonでjavascriptをキックします。
-------------
echo <<<EOM

～ ファイルごとにループ>>
<input type="button" onclick="javascript:delFIle({$fl});" value="削除">
～ <<ファイルごとにループ

EOM;

○ ファイルを削除するボタンがあるHTML上に記載するJavascript / 要jquery
---
function delFIle(del_file_id){
var param = {};
param['delFile'] = del_file_id;
param['imgDelete'] = 1;
$.ajax({
type:"POST",
url:"img.delete.phpへのパス",
data:param,
success: function(rtn_str){
if(rtn_str==1){
$('#mess_area_id').text('ファイルを削除しました');
}else{
$('#mess_area_id').text('削除に失敗しました');
}
}
});
}

○ ファイルを削除するPHP
----

if(file_exists($_POST['delFile'])){
if(unlink($_POST['delFile'])){
echo 1;exit; // 削除成功
}else{
exit; // 削除失敗
}
}

----
ご自身の環境に合わせて適宜ご修正ください。

[schwarzewald]

ありがとうございます。
submitから$("#delFile").click(function(){}に変え、ボタンを
<button type="button" id="delFile" value="{$fl}">削除</button> にしたところ画面遷移無しで上手く削除できました。

[takeyoshi]

解決されたようで良かったです^^