質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3204閲覧

Promise.all(promises).then...で更新したいが処理が走らない

rms398

総合スコア50

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2017/05/24 05:33

編集2017/05/24 05:45

###前提・実現したいこと
html javascript phpで画像や動画を削除する機能を作っています。
チェックボックスにチェックをつける→削除ボタンを押す→チェックされた画像のソース(相対パス)をajaxでphpに送る→unlink()で削除
全てajaxでphpにソース(相対パス)を送り終えたら
Promise.allで更新をするというのをしたいのですが

Promise.all(promises).then(function (results) { console.log('通りましたよ'); window.location.reload(true); });

この処理が走りません、console.log()で試したら何も表示されませんでした

でもブラウザのF12でちゃんとdelete.phpにpostで適正な値が渡されていました

###該当しているソースコード

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 var promises = []; 38 formDataArray.forEach(function(formData){ 39 //画像のsrcが入っているか確認 40 console.log(formData.get("path")); 41 //ajaxで送る 42 //deleteFiles(resolve,formData); 43 promises.push(deleteFilesPromise(formData)); 44 }); 45 Promise.all(promises).then(function (results) { 46 console.log('aaaa'); 47 window.location.reload(true); 48 }); 49 }); 50 function deleteFilesPromise(formData) { 51 return new Promise(function (resolve, reject) { 52 deleteFiles(formData, function (err, result) { 53 if (err != null) { 54 reject(err); 55 return; 56 } 57 resolve(result); 58 }); 59 }); 60 } 61 var deleteFiles = function(formData,aaa){ 62 //ajaxで送信 63 $.ajax({ 64 //POSTで送信 65 type: 'POST', 66 //ajaxが適切なcontentTypeに自動変換するのを防ぐ 67 contentType: false, 68 //データを文字列に自動変換するのを防ぐ 69 processData: false, 70 //送信先 71 url: './delete.php', 72 //送るデータ 73 data: formData, 74 //通信成功時に呼ばれる 75 //data 接続先PHPファイルが出力したデータ 76 success: function(data,dataType) { 77 console.log("成功" +data); 78 //res(formData); 79 }, 80 //通信失敗時に呼ばれる 81 //XMLHttpRequest.status HTTPステータス 82 //textStatus timeout、error、parsererror等の文字列 83 //errorThrown 例外情報 84 error: function(XMLHttpRequest, textStatus, errorThrown){ 85 console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown); 86 } 87 }); 88 } 89});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ブラウザのF12をおしてdelete.phpにpostで適正な値が渡されているか確認してください

テスト

テストサンプルです。
iは連番で渡しているのでdelete.phpで間違っても削除を走らせないで下さい
以下で処理すれば、10個のpostデータをおくってすべてがもどってきたら
thenが走りますよね?

javacript

1<script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> 2<script> 3var prm=[]; 4console.log("start"); 5for(var i=0;i<10;i++){ 6 (function(i){ 7 prm[i]= new Promise(function(resolver){ 8 var fd=new FormData(); 9 fd.append('del_id',i); 10 var xhr = new XMLHttpRequest(); 11 xhr.open('POST','delete.php'); 12 xhr.addEventListener("load" ,function() { 13 console.log(this.response) 14 resolver(this); 15 }); 16 xhr.send(fd); 17 }); 18 })(i); 19} 20Promise.all( prm ).then(function(){ 21 console.log("end"); 22}); 23 24</script>

投稿2017/05/24 05:39

編集2017/05/24 05:53
yambejp

総合スコア114843

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rms398

2017/05/24 06:40 編集

旧:適正な値が表示されました テストサンプルはちゃんと走りました
yambejp

2017/05/24 07:05

そうなるとpromiseがresolverをきちんと返してないのかもしれませんね var deleteFiles = function(formData,aaa){ の第二引数のaaaは参照されていないようですが successの中から利用してresolverを返さないとまずいんじゃないですか?
rms398

2017/05/24 07:25

aaa にあたる引数をreturn new Promise(function (resolve, reject)のresolveにしたらちゃんと動きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問