htmlが更新されずチェックボックスが残る

###前提・実現したいこと
アップロードした画像を削除する機能を作っています。
画像はimgフォルダの画像が参照され画像の数だけチェックボックスと画像が表示されます。
チェックしたあとに削除ボタンを押すと画像が削除され、javascriptで更新するのですが、htmlのほうが更新されていない（？）状態になります
#該当のソースコード

html
1<?php
2  $images = array(); //画像ファイル名のリストを格納する配列
3
4  //画像フォルダから画像ファイル名を読み込む
5  if($handle = opendir('./img')){//アルバムフォルダを開いてそれを代入？
6    while($entry = readdir($handle)){//中身一つひとつを読み込み代入
7      //echo 'デバッグ(while)';
8      //「.」および「..」でないとき、ファイル名を配列に追加
9      if($entry  != "." && $entry != ".."){
10        $images[] = $entry;//画像を配列に代入
11        //echo 'デバッグ(if_true)';
12      }     }
13    closedir($handle);//アルバムフォルダを閉じる？
14  }
15?>
16<!DOCTYPE html>
17<html lang="ja">
18<head>
19<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
20<script type="text/javascript" src="jquery.min.js"></script>
21<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
22<script type="text/javascript" src="jquery-ui.min.js"></script>
23<link rel="stylesheet" href="./css/stylesheet.css">
24<title>無題 1</title>
25<script type="text/javascript" src="./js/fileDelete.js"></script>
26</head>
27
28<body>
29<form action="" id="fm">
30  <?php
31    if(count($images) > 0){
32      $cnt = 0;
33      foreach($images as $img){
34        $cnt++;
35        echo '<input id="Checkbox" type="checkbox" value="photo'. $cnt . '"/><label for="photo' . $cnt . '"><img alt="" id="photo' . $cnt . '" src="./img/' . $img . '"></label><br />';
36      }
37    } else {
38      echo '<p>画像はまだありません。</p>';
39    }
40  ?>
41
42  <input id="delete" type="button" value="Delete" />
43</form> 
44</body>
45
46</html>
47

javascript
1$(function(){
2    //フォームデータを一時保存する配列
3    var formDataArray = []
4    //クリックした時にデータ送信
5    $('#delete').on('click',function(){
6        //チェックボックス
7        var im = document.forms.fm.Checkbox;
8        var cnt = 0;
9        // Array オブジェクトを作成する
10        var img_id = new Array();
11        //チェックボックスの数だけ繰り返す
12        for(var i = 0; i < im.length; i++){
13            //チェックボックスにチェックがついてるか
14            console.log(im[i]);
15            console.log(im[i].checked);
16            if(im[i].checked){
17                //チェックボックスのvalue（imgのidが入っている）をimg_idにプッシュ
18                console.log(im[i].value);
19                img_id.push(im[i].value);
20                //チェックついてる数を数える
21                cnt++;
22            }
23        }
24        //チェックついてる数だけ繰り返す
25        console.log(cnt);
26        for(var i = 0; i < cnt; i++){
27            var formData = new FormData();
28            console.log(img_id[i]);
29            var id = img_id[i];
30            console.log(document.getElementById(img_id[i]));
31            //チェックのついている画像のソースをformDataにappend
32            formData.append('path',document.getElementById(img_id[i]).getAttribute("src"));
33            //formDataをArrayにpush
34            formDataArray.push(formData);
35        }
36        //入ってる配列を繰り返す
37        formDataArray.forEach(function(formData){
38            //画像のsrcが入っているか確認
39            console.log(formData.get("path"));
40            //ajaxで送る
41            deleteFiles(formData);           
42        });
43        location.reload(true);//更新する処理
44    });
45        var deleteFiles = function(formData){
46        //ajaxで送信
47        $.ajax({
48            //POSTで送信
49            type: 'POST',
50            //ajaxが適切なcontentTypeに自動変換するのを防ぐ
51            contentType: false,
52            //データを文字列に自動変換するのを防ぐ
53            processData: false,
54            //送信先
55            url: './delete.php',
56            //送るデータ
57            data: formData,
58            //通信成功時に呼ばれる
59            //data 接続先PHPファイルが出力したデータ
60            success: function(data,dataType) {
61                console.log("成功" +data);
62            },
63            //通信失敗時に呼ばれる
64            //XMLHttpRequest.status HTTPステータス
65            //textStatus            timeout、error、parsererror等の文字列
66            //errorThrown           例外情報
67            error: function(XMLHttpRequest, textStatus, errorThrown){
68                console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
69            }
70        });
71
72    }
73
74});

kei344

2017/05/22 11:25

「fileDelete.js」の処理によるので、質問文に追記してください。

rms398

2017/05/23 05:10

javascriptも追記しました

行動規範の内容に同意します

回答2件

削除がajaxなら画像一覧のタグ一式をHTMLもしくはJSONで受け取って
再描画して下さい。
そうではなくページの遷移で削除が反映されないのであれば
画像リストの取得方法が間違っているのかもしれません

投稿2017/05/22 12:02

yambejp

総合スコア114771

rms398

2017/05/23 05:18

ajaxは画像が置いてある場所（相対パス）をdelete.phpに送っているだけなので対処できないかもです。

yambejp

2017/05/23 05:24 編集

本来であれば削除する要求をなげたら削除後のリストを貰うのが筋だと思いますが、削除は削除だけで完結していてもよいでしょうそうなるともう一本ajaxでリストを受け取る要求を投げる必要がありそうです。もう一つの考え方として、削除されたかどうかは無視して、削除を要求した時点でjavascriptで現行のHTMLを編集してしまうという考え方もあります。ただし実態に基づかないのであまり美しくないと思います ajaxを2本投げる場合、削除がおわるまで待たないと正しいリストは得られないのでpromiseなど非同期を管理する処理が必要です

rms398

2017/05/23 06:55

ajaxを２本投げるというのは見た目が悪いので削除後のリストをもらうということにしたいんですけどリストをもらう処理はhtmlのほうのphpに何か処理を書くってことでしょうか

行動規範の内容に同意します

自己解決

javascript
1var promises = [];
2formDataArray.forEach(function(formData){
3    //画像のsrcが入っているか確認
4    console.log(formData.get("path"));
5    //ajaxで送る
6    //deleteFiles(resolve,formData);
7    promises.push(deleteFilesPromise(formData));
8});
9Promise.all(promises).then(function (results) {
10    window.location.reload(true);
11});
12function deleteFilesPromise(formData) {
13    return new Promise(function (resolve, reject) {
14        deleteFiles(formData, resolve, function (err, result) {
15            if (err != null) {
16                reject(err);
17                return;
18            }
19            resolve(result);
20            console.log('aaaa');
21        });
22    });
23}
24var deleteFiles = function(formData,resolver){
25    //ajaxで送信
26    $.ajax({
27        //POSTで送信
28        type: 'POST',
29        //ajaxが適切なcontentTypeに自動変換するのを防ぐ
30        contentType: false,
31        //データを文字列に自動変換するのを防ぐ
32        processData: false,
33        //送信先
34        url: './delete.php',
35        //送るデータ
36        data: formData,
37        //通信成功時に呼ばれる
38        //data 接続先PHPファイルが出力したデータ
39        success: function(data,dataType) {
40            console.log("成功" +data);
41            resolver(this);
42        },
43        //通信失敗時に呼ばれる
44        //XMLHttpRequest.status HTTPステータス
45        //textStatus            timeout、error、parsererror等の文字列
46        //errorThrown           例外情報
47       error: function(XMLHttpRequest, textStatus, errorThrown){
48            console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
49        }
50    });  
51}