Laravel投稿サイト構築.69 -モーダル表示リベンジ-

■前回

Herokuへの反映にちょっと手こずったが、手順は確立できてきたかな。というところ。

■画面遷移にrouteを使う

細かい修正だが、画面遷移やPOSTする場合の記述がまちまちだった。

書きがち

href="/detail?thread_id={{$thread->thread_id}}&reply_id=0"

下記のように記述するよう心掛ける。

-----

href="{{ route('detail.index', ['thread_id' => $thread->thread_id, 'reply_id' => $reply->reply_id]) }}"

-----

■削除時の確認とモーダル表示

現状、削除ボタンをクリックしたら、「本当に削除しますか？」とメッセージ表示してから削除を実行していた。

このメッセージ表示に、

onclick="return check();" のように記述して、

-----

function check(){

return confirm('本当に削除しますか？');

}

-----

と確認用の関数から削除していた。

これをモーダル表示に修正する。

モーダル表示。前回はJQueryで実装しようとして挫折したが、

今回はBootstrap5で再挑戦（BootstrapもjQueryだが）。

■Bootstrapでモーダル表示する準備

bootstrapの参照は、現状はcssしか参照していない。

これだと機能が制限されるため、jsファイルも参照する。

-----

-----

若干、すったもんだがあったが、最終的には下記の内容。

※blade.phpに記述

-----

<button type="button" data-bs-toggle="modal" data-bs-target="#modal{{$thread->thread_id}}">
削除
</button>
<div class="modal fade" id="modal{{$thread->thread_id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">以下のテーマを本当に削除しますか？</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body fs-3">
{{$thread->message_title}}
</div>
<div class="modal-footer">
<form action="{{route('thread.destroy', ['thread'=>$thread->thread_id])}}" method="post">
@csrf
@method('DELETE')
<button type="button" data-bs-dismiss="modal">閉じる</button>
<button type="submit">削除</button>
</form>
</div>
</div>
</div>
</div>