min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

PHP から javascriptのconfirm() を呼び出す → 「YESを押したらファイル削除」

phpjavascriptの連携。えらく苦労したが、やりたい動作ができた。こないだの失敗を踏まえて再挑戦。

min117.hatenablog.com

 

やりたいのはこう。

 

サーバに動画ファイルがある。

f:id:min117:20200830091518p:plain

自宅youbuteのような機能をphpで実装していて「mp4再生」ボタンを押せば観られる。

 

観たけどツマラナイ映像だった、削除したい としよう。

f:id:min117:20200830091629p:plain

「ts削除JS」ボタンを押すと動画が(サーバ上から)消える。この削除ボタンを実装したい

 

削除前に本当に削除していいか確認(confirm)画面が出るようにする。JavaScriptのconfirm()で出す。

f:id:min117:20200830091949p:plain

この実装が難しかった。phpからjavascriptを呼び出す必要があるから。この連携が意外にめんどくさい。

 

該当部分のソースはこれ。

f:id:min117:20200830090947p:plain

ポイント

php内にjavascriptを書ける。body内のどこに書いてもOK

phpprint文内にjavascript書いていくのが一番わかりやすい。

・ヒアストリングは見づらいので使わない。

2336行目から2349行目までがjavascriptの内容。

 

javascriptのconfirm()確認メッセージfunction confirm_del(){} の中に閉じ込める。

・そのconfirm_del(){} 関数formのonsubmitにセットしてやると、confirmの結果(YESかNoか)によって動作するしないを決定できる、つまりif文のような動きを実装できる。

 

動き

 2362行目「ts削除JS」ボタンが押される(=submitされる)

 2359行目 onsubmitにより関数confirm_del()が呼ばれる

 2336行目から2349行目により確認メッセージ(削除していいか)が出る。

  YESかNoかを(if文のように)確認してその結果をreturnしてくれる。

 2359行目 return結果がtrueだった場合のみ、doDEL.phpが呼び出される

 2360行目 doDEL.phpへのGETする引数DELTARGETはhidden要素で書く。

 これを2359行目で "doDEL.php?DELTARGET="と書いても動作しない(?以降は無視されてしまう)。

 

 確認

javascriptが動かないとき confirm('')を確認する。

 confirm('') シングルクオートが正しい

  confirm("") ダブルクオートは動かない

f:id:min117:20200830091046p:plain

 

なお、doDEL.phpGETで受け取ったファイル名の動画サーバ上から(問答無用で)削除する恐ろしい機能を持つ(削除はいつでも細心の注意が必要だ)。

 

ソース

2321                                  /// 削除ボタン実装 20200823 

2322                                  /// if (preg_match('/.*ts$|.*TS$|.*ts.*part/', "$n")) {

2323                                  print ' ';

2324                                  if (file_exists("$n")) {

2325                                      /// $mp4name について、その元となった$n(tsファイル)がまだ存在しているなら削除ボタンを表示

2326                                      /// $n      : wow_16916_20200815_053301.ts

2327                                      /// $mp4name: wow_16916_20200815_053301.ts.mp4

2328                                      ///// print '<mark>削除ボタンをここに実装する</mark>';

2329                                      print '<mark>ts:' . "$n" . '</mark>';

2330                                      print ' ';

2331                                      // print '<a href="doDELFILE.php?DELTARGET=' . rawurlencode("$n") . '" class="btn btn-danger" target="_blank">ts削除</a>';

2332 

2333                                      /////  削除実装<a href>でやる版 これは動く

2334                                      print '<a href="doDEL.php?DELTARGET=' . rawurlencode("$n") . '" class="btn btn-danger" target="_blank">ts削除</a>';

2335 

2336                                      print '<script>';

2337                                      // print 'myANS1 = confirm("本当に削除しますか1?");';

2338                                      // print 'document.write(myANS1);';

2339                                      // print 'alert(\'javascript動いています\');'; // ダブルクオートで"javascript動いています"はダメ

2340                                      print 'function confirm_del() {';

2341                                      // print '    // var myANS2 = confirm("本当に' . "$n" . 'を削除しますか?';

2342                                      /// confirm('')はダブルクオートじゃダメ!何もエラー出さずに動かない!javascriptはエラー出さない!

2343                                      /// confirm("")は動かない!

2344                                      // print '    var myANS2 = confirm(\'本当に削除しますか2?\');';

2345                                      print '    var myANS2 = confirm(\'本当に' . "$n" . 'を削除しますか?\');';

2346                                      // print '    document.write(myANS2);';

2347                                      print '    return myANS2;';

2348                                      print '}';

2349                                      print '</script>';

2350 

2351                                      // onsubmitによって、myANS2がtrueのときだけdoDEL.phpが実行される

2352                                      // onsubmitによって、if文と同じ効果が得られる(if YESだったらdoDEL.php実行)

2353                                      // print '<form style="display:inline" method="GET" action="doDEL.php" onsubmit="return confirm_del()">';

2354                                      // print '<form style="display:inline" target="_blank" class="btn btn-danger" method="GET" action="doDEL.php?DELTARGET="' . r     awurlencode("$n") . '" onsubmit="return confirm_del()">';

2355 

2356                                      // formのときに  doDEL.php?DELTARGET=はダメ。パラメータは必ずhiddenで投げる

2357                                      // ↑これだとGETはdoDEL.php?後ろ空白 になってしまう。

2358                                      // print '<form style="display:inline" method="GET" action="doDEL.php?DELTARGET=' . rawurlencode("$n") . '" onsubmit="return      confirm_del()">';

2359                                      print '<form style="display:inline" method="GET" action="doDEL.php" onsubmit="return confirm_del()">';

2360                                      print '<input type="hidden" name="DELTARGET" value="' . "$n" . '">';

2361                                      // print ' <input type="submit" value="削除実行">';

2362                                      print '    <input type="submit" value="ts削除JS" class="btn btn-danger" target="_blank"/></a>';

2363                                      print '</form>';

2364 

2365                                      /// 命名規則

2366                                      // do:ファイル名に付ける:doDEL.php

2367                                      // go:関数の名前に付ける:goDEL() や goRM() 

2368                                      /// 

2369                                      /// phpからjavascriptを呼び出す hear_string_ヒアストリング利用

2370                                      /// 画面遷移でポップアップconfirm確認画面出すのによく使いそう

2371                                      /// https://so-zou.jp/web-app/tech/programming/php/sample/javascript-cooperation.htm

2372                                      // goRM(TARGET,COMFIRM);

2373                                      // goRM(TARGET);

2374                                      // print '<a href="doLSglob.php?RM=YES" class="btn-danger">削除test</a>';

2375 

2376                                  } else {

2377                                      print '<mark>削除対象tsなし</mark>';

2378                                  }

2379 

2380                                  print ' ';