Laravel:削除実行前に確認画面を表示させる
- 2019.03.28
- JavaScript備忘録
- JavaScript, Laravel, PHP, スクリプト備忘録, レコード削除, 自作システム, 間違防止
Laravel:削除実行前に確認画面を表示させる
自作システムがDBとしてある程度動作するところまでたどり着きました。
実際に使いだすと欲しい『うっかり削除の防止機能』
と言うことで、【削除ボタンクリック = 即削除】をやめワンクッション置こうという施策についてです。
方法を大別すると2パターン
- 削除ボタンを通常は隠しておき、決まったアクションをした時だけ表示させる。
- モーダルウィンドで表示の許可を問いアクション実行前に処理を分岐させる。
1番は、例えば『アコーディオンの中に削除ボタンを配置し、オープンした時だけ見える』と言う方法があります。
まぁ、どちらをよく見るかと言われれば、2番のウィンドで許可ですよね。
簡単に済ませるなら alert でテキスト伝達事項がある場合はモーダルで
変更許諾を行うウィンドは 単純なalert か モーダルウィンドで専用テキストとともに実装するかが多いようです。
簡単に作れて使いまわせるのは【alert】です。
クリックアクションでお知らせの様なものを一緒に表示させたいのであれば、モーダルページを1つづつ作る方法もありです。「このボタンはこんなアクションします」と言った説明なんかはこの方法で実装しやすいです。
今回やりたいのは【削除】の判断処理。
数も多いので「標準型を作って使いまわしたい」と言うことで単純なアラートを選択しました。
実際に書いたコード
■public\js\app.js
1 2 3 4 5 6 7 |
function delete_alert(e){ if(!window.confirm('本当に削除しますか?')){ window.alert('キャンセルされました'); return false; } document.deleteform.submit(); }; |
■resources\views\hogehoge.bladelphp
1 2 3 4 5 6 7 |
@if($roletype_id <= ($item->roletype_id)) <form action="/users/{{$item->id}}" method='post'> {{ csrf_field() }} {{ method_field('DELETE') }} <input type="submit" name="delete" value="削除" onClick="delete_alert(event);return false;"> </form> @endif |
ちょっと解説
app.js にDeleteボタンをクリックしたときに呼び出すファンクションを記載します。
window.confirmはメッセージと、OK と キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。
if(!window.confirm() で【キャンセル が選択された時】という意味になります。※!で否定しているから
つまりは『キャンセルされたら[キャンセルされました]を表示。そうじゃなかったらsubmitしてね』となります。
後はこのfunctionをクリックアクションとして削除ボタンに[ onClick=”delete_alert(event);return false;” ] と配置していけばjsの使いまわしOKです。
まとめ
色々調べると、モーダル表示でアクションを促すのは止めた方が良い等の記事も見当たりました。
知り合いのエンジニアの方に聞いたところ「あまり神経質にならなくてもいいパート」であるとの答えでした。
だったら簡単で分かりやすい方が良いですよね。
-
前の記事
レスポンシブデザインについて考えてみる 2019.03.26
-
次の記事
Laravel:SoftDelete(論理削除)を稼働させる 2019.03.29